Working Pulsating Leaflet Marker

by Christian Arielli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css">
<!DOCTYPE html>
<html>
<head>
	<title>Leaflet mobile example</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<link rel="stylesheet" href="../dist/leaflet.css" />

	<script src="../dist/leaflet.js"></script>

	<style>
		body {
			padding: 0;
			margin: 0;
		}
		html, body, #map {
			height: 100%;
		}
	</style>
</head>
<body>
	<style>
	
	.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;}
	}
	</style>
	<div id="map"></div>

	<script>
		var map = L.map('map').setView([51.505, -0.09], 13);

		// create a tile layer sourced from mapbox
		L.tileLayer('https://api.mapbox.com/styles/v1/christianjunk/cks3ml8ee424417pdzbdpv1np/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiY2hyaXN0aWFuanVuayIsImEiOiJkMjIzMzRjNzBlNjc1OWUxYmE0NzBjNzQ3MWNiYTNkMyJ9.q4y4NMEwFYGRZdSEfPBg7A', {
            attribution: 'Map data &copy;  Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'}).addTo(map);	

		L.marker([50.5, 30.5]).addTo(map);

		map.setView([50.5, 30.5]);

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

		// Create three markers and set their icons to cssIcon
		L.marker([50.5, 30.5], {icon:...