Pulsating Leaflet marker using CSS3 animations

Question

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?

Answer 1

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.

Answer 2

Your original approach didn't work because you used transform (which Leaflet also uses to place it's markers).

Example of a Leaflet placement which is overwritten:

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