Leaflet的脉冲动画有奇怪的行为[包括GIF]

Question

我想用Leaflet在标记上制作一个脉冲动画但是我的行为非常奇怪。

CSS

.mapbox-marker {
    mix-blend-mode: screen;
}

.animate {
    transition-property: transform;
    -webkit-animation: pulsate 30s ease-out;
    -webkit-animation-iteration-count: 1; 
    opacity: 0.0
}

@-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

这是我的标记

myCircleMarker = L.CircleMarker.extend({options: {
  radius: currentRadius,
  stroke: false,
  fillColor: '#FFFFFF',
  fillOpacity: 1,
  clickable: false,
  className: 'mapbox-marker animate'
}});

当我添加标记时

function addMarkersBatch(positions) {
    var markers = []
    positions.forEach(function(position) {
        var marker = new myCircleMarker(position);
        marker.setRadius(currentRadius*1.8);
        marker.setStyle({fillColor: "#fe5928"});
        map.addLayer(marker);
        markers.push(marker);
    });
}

动画符合预期，但它带有非常奇怪的标记行为。我只是希望标记在地图位置上缩放，但在缩放时它会在屏幕上移动。

希望任何人都可以提供帮助

Answer 1

显然修复非常简单。我只需要将transform-origin设置为居中

@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.0, 0.0); 
        opacity: 0.0;
        transform-origin:center;
    }
    1% {
        -webkit-transform: scale(1.5, 1.5); 
        opacity: 1.0;
    }
    5% {
        -webkit-transform: scale(0.8, 0.8); 
    }
    50% {
        opacity: 1.0;
    }
    100% {
        -webkit-transform: scale(0.4, 0.4); 
        opacity: 0.0;
    }
}