使用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);

這種方法目前不起作用。 動畫標記圖標始終顯示在地圖的左上角。 似乎轉換（比例）打破了當前的標記位置：

順便說一下，我在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);