openlayers sets icon flickering effect through overlay html5 css3

openlayers sets icon flickering effect through overlay html5 css3

Add a div to the page, preferably in a map container

<div id="css_animation"></div>

Add styles to the css file, be sure to uninstall the css file, otherwise an error will be reported

#css_animation {
    height: 30px;//图标高
    width: 30px;//图标高
    border-radius: 25px;//圆形
    background: rgb(255, 0, 0);//颜色 可以为rgba()透明度
    transform: scale(0.2);//变换初始大小
    animation: myfirst 2s;//变换速度
    animation-iteration-count:infinite;//重复闪烁
    z-index: 200;
}

@keyframes myfirst {
    to {
        transform: scale(0.8);//变换结束大小
        background: rgba(255, 0, 0,0);//结束时颜色
    }
}

Add overlay to map

 var point_div = document.getElementById("css_animation");
 var point_overlay = new ol.Overlay({//定义为全局变量
            element: point_div,
            positioning: 'center-center'
        });
 map.addOverlay(point_overlay);

Set the blink position

point_overlay.setPosition([12904227.7304252871, 5035631.757232161]);

unblink

point_overlay.setPosition(undefined);