使用CSS3动画的脉动传单标记

Question

我想在Leaflet地图上创建自定义脉动地图标记图标。出于学习目的，我不想使用第三方插件。

我使用以下CSS代码创建'脉动'动画：

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;    
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;     
}   
@-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;}
}

我正在使用Leaflet的DivIcon来更改标记的可视化（引用上面的CSS类）：

// Define an icon called cssIcon
var cssIcon = L.divIcon({
    // Specify a class name we can refer to in CSS.
    className: 'gps_ring'
});

// Create markers and set their icons to cssIcon
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map);

此方法暂时不起作用。动画标记图标始终显示在地图的左上角。似乎转换（比例）打破了当前的标记位置：

BTW我在Windows 7和Yosemite上使用Chrome 44.x。

我在这里创建了一个最小的例子：

http://jsfiddle.net/christianjunk/q69qx45c/1/

出了什么问题？为什么动画会破坏标记的地图位置？

Answer 1

在调查了一段时间之后，我找到了解决问题的方法：

我改变了CSS代码slighlty：

.css-icon {

}

.gps_ring { 
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*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;}
}

我改变了DivIcon类的实例化：

// Define an icon called cssIcon
var cssIcon = L.divIcon({
  // Specify a class name we can refer to in CSS.
  className: 'css-icon',
  html: '<div class="gps_ring"></div>'
  // Set marker width and height
  ,iconSize: [22,22]
  // ,iconAnchor: [11,11]
});

以下是诀窍：我现在使用内部html 来运行CSS动画。这将保留标记的位置。另请注意 iconSize 属性，该属性具有转换后图标的总大小（21 px = ~18px x 1.2）。以这种方式设置将动画圆圈置于坐标中心：

工作示例：http://jsfiddle.net/christianjunk/waturuoz/

我仍然无法弄清楚，为什么我的第一种方法不起作用。

Answer 2

您的原始方法不起作用，因为您使用了变换（Leaflet也使用它来放置它的标记）。

覆盖的传单展示位置示例：

transform: translate3d(499px, 604px, 0px);