Start Css3 Animation

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;}

HTML

<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>