Animated Equalizer

equalizer.css

*{ list-style-type:none; font-family: Gill sans;}

li {float: left;}

#wrapper {
  width:300px;
  height:50px;
  background: rgb(241, 241, 241);
  margin: 250px auto;
  border-radius:5px/10px;
}

#equaliser {
  width: 30px;
  height: 50px;
  position: relative;
  bottom:10px;
}

.bar {
  float:left;
  width: 7px;
  height: 10px;
  background:red;
  position: absolute;
  bottom:0;
}

.first { 
  left: 7px;
  -webkit-animation: firstBar  1s infinite;
}
.second { 
  left: 21px; 
  -webkit-animation: secondBar  1s infinite;
}
.third { 
  left: 35px; 
  -webkit-animation: thirdBar  1s infinite;
}

@-webkit-keyframes firstBar {
  0%   { height: 10px; }
  50%  { height: 30px; }
  100% { height: 10px; }
}

@-webkit-keyframes secondBar {
  0%   { height: 30px; }
  50%  { height: 10px; }
  100% { height: 30px; }
}

@-webkit-keyframes thirdBar {
  0%   { height: 20px; }
  40%  { height: 10px; }
  60%  { height: 30px; }
  100% { height: 20px; }
}

#music li{ font-size: 25px; color:rgb(41,41, 41);}
#music .time {margin-left:67px;}

equalizer.html

<!-- http://codepen.io/anon/pen/alGny -->

<div id="wrapper"> 
  <li id="equaliser">
    <div class="bar first">
    </div>
    <div class="bar second">
    </div>
    <div class="bar third">
    </div>
  </li><!-- /equaliser -->
  <li id="music">
    <ul>
      <li class="tune">Start Now</li>
      <li class="time">5:57</li>
    </ul>
  </li><!-- /music -->
</div>