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

我想在

顺便说一句，我在 Windows 7 和 Yosemite 上使用 Chrome 44.x.

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

我还是不明白，为什么我的第一种方法不起作用.

I want to create a custom pulsating map marker icon on a Leaflet map. For learning purposes I don't want to use third party plugins.

I am using the following CSS code for creating the 'pulsating'-animation:

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

I am using Leaflet's DivIcon in order to change the visualization of a marker (referencing the CSS class above):

// 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);

This approach doesn't work at the moment. The animated marker icon always shows up on the top left corner of the map. It seems that the transformation (scale) breaks the current marker location:

BTW I am using Chrome 44.x on Windows 7 and Yosemite.

I have created a minimal example here:

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

What is going wrong? Why does the animation breaks the marker's map position?

解决方案

After investigating for some more time I found a way to solve the problem:

I changed the CSS code 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;}
}

And I changed the instantiation of my DivIcon class:

// 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]
});

The following did the trick: I am now using the inner html to run the CSS animation. This will preserve the marker's location. Also note the iconSize attribute, which has the total size of the icon after the transformation ( 21 px =~ 18px x 1.2). Setting it this way centers the animated circle at the coordinate:

Working example: http://jsfiddle.net/christianjunk/waturuoz/

I still couldn't figure out, why my first approach wasn't working.