emersion/ios-geolocation-marker.html

## ios-geolocation-marker.html
<!DOCTYPE html>
<html>
<head>
	<title>iOS-style geolocation animated marker in CSS3</title>

	<style>
    @-webkit-keyframes map-blip {
    	0% {
    		opacity: 0.35;
    		-webkit-transform: scale(0.3);
    	}

    	100% {
    		opacity: 0;
    		-webkit-transform: scale(3.8);
    	}
    }
    @-moz-keyframes map-blip {
    	0% {
    		opacity: 0.35;
    		-moz-transform: scale(0.3);
    	}

    	100% {
    		opacity: 0;
    		-moz-transform: scale(3.8);
    	}
    }
    @keyframes map-blip {
    	0% {
    		opacity: 0.35;
    		transform: scale(0.3);
    	}

    	100% {
    		opacity: 0;
    		transform: scale(3.8);
    	}
    }
    .blip {
    	position: relative;
    	width: 32px;
    	height: 32px;
    	-webkit-transform: scale(1); /* Force GPU usage */
    }
    .blip .circle-radar {
    	display: block;
    	background: #017aff;
    	border-radius: 32px;
    	opacity: 0;
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;

    	-webkit-animation-name: map-blip;
    	-webkit-animation-duration: 2400ms;
    	-webkit-animation-timing-function: ease-out;
    	-webkit-animation-iteration-count: infinite;

    	-moz-animation-name: map-blip;
    	-moz-animation-duration: 2400ms;
    	-moz-animation-timing-function: ease-out;
    	-moz-animation-iteration-count: infinite;

    	animation-name: map-blip;
    	animation-duration: 2400ms;
    	animation-timing-function: ease-out;
    	animation-iteration-count: infinite;
    }
    .blip .circle-pin {
    	display: block;
    	background: #017aff;
    	position: absolute;
    	top: 7px;
    	left: 7px;
    	width: 18px;
    	height: 18px;
    	border: 3px solid white;
    	border-radius: 16px;
    	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }
	</style>
</head>
<body>
  <div class="blip">
  	<span class="circle-radar"></span>
  	<span class="circle-pin"></span>
  </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>iOS-style geolocation animated marker in CSS3</title>

	<style>
	@-webkit-keyframes map-blip {
	0% {
	opacity: 0.35;
	-webkit-transform: scale(0.3);
	}

	100% {
	opacity: 0;
	-webkit-transform: scale(3.8);
	}
	}
	@-moz-keyframes map-blip {
	0% {
	opacity: 0.35;
	-moz-transform: scale(0.3);
	}

	100% {
	opacity: 0;
	-moz-transform: scale(3.8);
	}
	}
	@keyframes map-blip {
	0% {
	opacity: 0.35;
	transform: scale(0.3);
	}

	100% {
	opacity: 0;
	transform: scale(3.8);
	}
	}
	.blip {
	position: relative;
	width: 32px;
	height: 32px;
	-webkit-transform: scale(1); /* Force GPU usage */
	}
	.blip .circle-radar {
	display: block;
	background: #017aff;
	border-radius: 32px;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	-webkit-animation-name: map-blip;
	-webkit-animation-duration: 2400ms;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: map-blip;
	-moz-animation-duration: 2400ms;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: infinite;

	animation-name: map-blip;
	animation-duration: 2400ms;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
	}
	.blip .circle-pin {
	display: block;
	background: #017aff;
	position: absolute;
	top: 7px;
	left: 7px;
	width: 18px;
	height: 18px;
	border: 3px solid white;
	border-radius: 16px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	}
	</style>
	</head>
	<body>
	<div class="blip">
	<span class="circle-radar"></span>
	<span class="circle-pin"></span>
	</div>
	</body>
	</html>