CSS3 Pulsating Dot - Snippet

Preview
HTML
CSS
JS

<div id="holder">
	<div class="dot"></div>
	<div class="pulse"></div>
</div>

#holder {
	margin: 50px auto;
	width: 50px;
	height: 50px;
	position: relative;

}
.pulse {
	width: 10px;
	height: 10px;
	border: 5px solid #f7f14c;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	background-color: #716f42;
	z-index: 10;
	position: absolute;
	left: 15px;
	top: 15px;
}
.dot {
	border: 10px solid #fff601;
	background: transparent;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	height: 50px;
	width: 50px;
	-webkit-animation: pulse 3s ease-out;
	-moz-animation: pulse 3s ease-out;
	animation: pulse 3s ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: 1;
	opacity: 0;
}
@-moz-keyframes pulse {
 0% {
	-moz-transform: scale(0);
	opacity: 0.0;
 }
 25% {
	-moz-transform: scale(0);
	opacity: 0.1;
 }
 50% {
	-moz-transform: scale(0.1);
	opacity: 0.3;
 }
 75% {
	-moz-transform: scale(0.5);
	opacity: 0.5;
 }
 100% {
	-moz-transform: scale(1);
	opacity: 0.0;
 }
}
@-webkit-keyframes "pulse" {
 0% {
	-webkit-transform: scale(0);
	opacity: 0.0;
 }
 25% {
	-webkit-transform: scale(0);
	opacity: 0.1;
 }
 50% {
	-webkit-transform: scale(0.1);
	opacity: 0.3;
 }
 75% {
	-webkit-transform: scale(0.5);
	opacity: 0.5;
 }
 100% {
	-webkit-transform: scale(1);
	opacity: 0.0;
 }
}