title: Pulsating Leaflet marker using CSS3 animations
body: <p>I want to create a custom pulsating map marker icon on a <a href="http://leafletjs.com/" rel="noreferrer">Leaflet</a> map. For learning purposes I don't want to use third party plugins.</p>
  
  <p>I am using the following CSS code for creating the 'pulsating'-animation:</p>
  
  <pre class="lang-css prettyprint-override"><code>.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;}
  }
  </code></pre>
  
  
  
  <p>I am using Leaflet's <a href="http://leafletjs.com/reference.html#divicon" rel="noreferrer">DivIcon</a> in order to change the visualization of a marker (referencing the CSS class above):</p>
  
  <pre class="lang-js prettyprint-override"><code>// 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);
  </code></pre>
  
  
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/u0xbN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u0xbN.png" alt="enter image description here"></a></p>
  
  <p>BTW I am using Chrome 44.x on Windows 7 and Yosemite.</p>
  
  <p>I have created a minimal example here:</p>
  
  <p><a href="http://jsfiddle.net/christianjunk/q69qx45c/1/" rel="noreferrer">http://jsfiddle.net/christianjunk/q69qx45c/1/</a></p>
  
  <p>What is going wrong? Why does the animation breaks the marker's map position?</p>