Animating a user interaction in mapbox-gl-js

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Animating a user highlight</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic3RldmFnZSIsImEiOiJGcW03aExzIn0.QUkUmTGIO3gGt83HiRIjQw';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/stevage/cjonudzz83h3z2rlewmb82lb0', // stylesheet location
    center: [144.96, -37.82], // starting position [lng, lat]
    zoom: 16 // starting zoom
});
map.on('load', () => {
    map.addSource('highlight', {
        type: 'geojson',
        data: { type: 'FeatureCollection', features: [] }
    });
    map.on('click', 'poi-label', e => {
        if (!e.features) return;
        if (map.getLayer('highlight-point')) map.removeLayer('highlight-point');
        map.addLayer({
            id: 'highlight-point',
            source: 'highlight',
            type: 'circle',
            paint: { 
                'circle-color': 'transparent',
                'circle-stroke-color': 'green',
                'circle-stroke-width': 3,
                'circle-radius': 0
             }
        });

map.getSource('highlight').setData(e.features[0])
        map.setPaintProperty('highlight-point', 'circle-radius', 20);
    
    });
});
</script>

</body>
</html>

https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js