How to create Audio Waves with CSS3

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

CSS3 :

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

.sbring {
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
background-color: white;
top:161px;
left:206px;
}

@-webkit-keyframes ani {
0% {-webkit-transform: scale(0.01); opacity: 0} 
1% {-webkit-transform: scale(0.01); opacity: 0.8} 
95% {-webkit-transform: scale(1); opacity: 0.8;}
100% {-webkit-transform: scale(1); opacity: 0;}
}

@keyframes ani {
0% {transform: scale(0.01); opacity: 0} 
1% {transform: scale(0.01); opacity: 0.8} 
95% {transform: scale(1); opacity: 0.8;}
100% {transform: scale(1); opacity: 0;}
}

#r2 { -webkit-animation-delay: -1s;animation-delay: -1s;}
#r3 { -webkit-animation-delay: -2s;animation-delay: -2s;}
#r4 { -webkit-animation-delay: -3s;animation-delay: -3s;}
#r5 { -webkit-animation-delay: -4s;animation-delay: -4s;}
#r6 { -webkit-animation-delay: -5s;animation-delay: -5s;}

HTML :

<div class="sbring"></div>
<div id="r1" class="ring"></div>
<div id="r2" class="ring"></div>
<div id="r3" class="ring"></div>
<div id="r4" class="ring"></div>
<div id="r5" class="ring"></div>
<div id="r6" class="ring"></div>