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

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

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

.gps\u环{
边框：3px实心#999；
-webkit边界半径：30px；
高度：18px；
宽度：18px；
-webkit动画：脉动1s放松；
-webkit动画迭代计数：无限；
}   
@-webkit关键帧脉动{
0%{-webkit变换：比例（0.1,0.1）；不透明度：0.0；}
50%{不透明度：1.0；}
100%{-webkit变换：比例（1.2,1.2）；不透明度：0.0；}
}

我使用传单更改标记的可视化（参考上面的CSS类）：

//定义一个名为cssIcon的图标
var cssIcon=L.divIcon({
//指定我们可以在CSS中引用的类名。
类名：“gps_环”
});
//创建标记并将其图标设置为cssIcon
标记（[50.5,30.5]，{icon:cssIcon}）.addTo（map）；

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

顺便说一句，我在Windows7和Yosemite上使用Chrome44.x

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

---

出什么事了？为什么动画会破坏标记的贴图位置？

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

我更改了CSS代码slighlty：

.css图标{
}
.gps_环{
边框：3px实心#999；
-webkit边界半径：30px；
高度：18px；
宽度：18px；
-webkit动画：脉动1s放松；
-webkit动画迭代计数：无限；
/*不透明度：0.0*/
}
@-webkit关键帧脉动{
0%{-webkit变换：比例（0.1,0.1）；不透明度：0.0；}
50%{不透明度：1.0；}
100%{-webkit变换：比例（1.2,1.2）；不透明度：0.0；}
}

我更改了DivIcon类的实例化：

//定义一个名为cssIcon的图标
var cssIcon=L.divIcon({
//指定我们可以在CSS中引用的类名。
类名：“css图标”，
html:'
//设置标记宽度和高度
，iconSize:[22,22]
//，iconAnchor:[11,11]
});

下面的操作完成了：我现在使用内部html来运行CSS动画。这将保留标记的位置。还要注意iconSize属性，它具有转换后图标的总大小（21 px=~18px x 1.2）。将其设置为使动画圆在坐标处居中：

工作示例：

---

我仍然不明白为什么我的第一种方法不起作用。

您最初的方法不起作用，因为您使用了转换（传单也使用转换来放置标记）

覆盖的传单放置示例：

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

简单明了：