带有传单的脉冲动画有奇怪的行为(包括GIF)

Question

我想用传单在一个标记上做一个脉冲动画，但是我得到了一个非常奇怪的行为。

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;
    }
}