Pulse CSS #1

by toubia95

HTML

<div id="pulser">
<div class="pulse pulse1"></div>
<div class="pulse pulse2"></div>
</div>

CSS

body { background-color: #FFF;}
 
.pulser {
position: relative;
}
.pulse {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
 
.pulse1 {
border: 30px solid #4380D3;
}
 
.pulse2 {
border: 28px solid #DDD;
-webkit-animation: pulse2 1s linear infinite;
-moz-animation: pulse2 1s linear infinite;
animation: pulse2 1s linear infinite;
}
 
/* moz */
@-moz-keyframes pulse2 {
0% { border-width:28px; }
50% { border-width:14px; }
100% { border-width:0px; }
}