How to create Animated Rings with CSS3

By using border-radius and scale transformations it is very simple to create rings. Here animation was created by CSS3 keyframes.

CSS :

.ring {
width:300px;
height: 400px;
border-radius: 50%;
position: absolute;
top:10px;
border: 15px white solid;
-webkit-animation-name: ani; 
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-direction: normal;
}

@-webkit-keyframes ani {
0% {-webkit-transform: scale(0.01);} 
1% {-webkit-transform: scale(0.01); } 
95% {-webkit-transform: scale(1); border:1px white solid;}
100% {-webkit-transform: scale(1); border:1px white solid;}
}

#ring2 { -webkit-animation-delay: -1s;}
#ring3 { -webkit-animation-delay: -2s;}
#ring4 { -webkit-animation-delay: -3s;}
#ring5 { -webkit-animation-delay: -4s;}
#ring6 { -webkit-animation-delay: -5s;}

HTML :

<div id="ring1" class="ring"></div>
<div id="ring2" class="ring"></div>
<div id="ring3" class="ring"></div>
<div id="ring4" class="ring"></div>
<div id="ring5" class="ring"></div>
<div id="ring6" class="ring"></div>