pulsating dots - glow glowing
a column of pulsing dots using css keyframes animation
CSS
.dot-container {
position: relative;
height:50px;
width:200px;
}
.dot {
width: 15px;
height: 15px;
background-color: #62bd19;
border-radius: 50%;
position: absolute;
top: 20px;
left: 20px;
}
.dot-ring {
border: 3px solid #62bd19;
-webkit-border-radius: 30px;
height: 25px;
width: 25px;
position: absolute;
left: 15px;
top: 15px;
-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;}
}
HTML
<div class="dot-container">
<div class="dot-ring"></div>
<div class="dot"></div>
</div>
<div class="dot-container">
<div class="dot-ring"></div>
<div class="dot"></div>
</div>
<div class="dot-container">
<div class="dot-ring"></div>
<div class="dot"></div>
</div>
<div class="dot-container">
<div class="dot-ring"></div>
<div class="dot"></div>
</div>