I've been attempting to replicate the animation effect featured on http://codepen.io/cayoub88/pen/DCemr using JsFiddle, but unfortunately, I haven't had much success. Any idea why this might be happening?
You can view my fiddle at http://jsfiddle.net/9pknjor8/
Here's the code snippet:
body {
background: #428CD6;
}
.signal {
border: 3px solid #fff;
border-radius: 30px;
height: 30px;
left: 50%;
margin: -15px 0 0 -15px;
opacity: 0;
position: absolute;
top: 50%;
width: 30px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
}
@keyframes pulsate {
0% {
transform: scale(.1);
opacity: 0.0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2);
opacity: 0;
}
}<div class="signal"></div>