Create music sound animation - HTML CSS CSS Animation

Description

Create music sound animation
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#votingmeter {<!--  w w  w .  ja  v  a2 s . co  m-->
   height:100px;
   text-align:center;
   position:relative;
   background-color:Chartreuse;
   width:100%;
}

.voteindex {
   background:yellow;
   bottom:2px;
   height:31px;
   position:absolute;
   width:11px;
   animation:sound 0ms -801ms linear infinite alternate;
}

.voteindex:nth-child(1) {
   left:2px;
   animation-duration:475ms;
}

.voteindex:nth-child(2) {
   left:13px;
   animation-duration:434ms;
}

.voteindex:nth-child(3) {
   left:26px;
   animation-duration:408ms;
}

.voteindex:nth-child(4) {
   left:38px;
   animation-duration:459ms;
}

.voteindex:nth-child(5) {
   left:50px;
   animation-duration:401ms;
}

.voteindex:nth-child(6) {
   left:53px;
   animation-duration:428ms;
}

.voteindex:nth-child(7) {
   left:66px;
   animation-duration:442ms;
}

.voteindex:nth-child(8) {
   left:78px;
   animation-duration:420ms;
}

.voteindex:nth-child(9) {
   left:90px;
   animation-duration:488ms;
}

.voteindex:nth-child(10) {
   left:103px;
   animation-duration:443ms;
}

@keyframes sound  {
   0% {
      opacity:.36;
      height:31px;
   }
   
   100% {
      opacity:2;
      height:100px;
   }

}
</style> 
 </head> 
 <body> 
  <div id="votingmeter"> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
   <div class="voteindex"></div> 
  </div>  
 </body>
</html>
Create music sound animation - HTML CSS CSS Animation

Description

Demo Code

Related Tutorials
