@-webkit-keyframes move1 {
  0% { height: 16%; }
  25% { height: 66%; }
  75% { height: 50%; }
  100% { height: 16%; }
}

@-webkit-keyframes move2 {
  0% { height: 5%; }
  25% { height: 41%; }
  75% { height: 66%; }
  100% { height: 5%; }
}

@-webkit-keyframes move3 {
  0% { height: 25%; }
  25% { height: 5%; }
  75% { height: 66%; }
  100% { height: 25%; }
}

@-webkit-keyframes move4 {
  0% { height: 0; }
  25% { height: 33%; }
  75% { height: 75%; }
  100% { height: 0; }
}

@-webkit-keyframes move5 {
  0% { height: 41%; }
  25% { height: 16%; }
  75% { height: 75%; }
  100% { height: 41%; }
}

.bars { 
  height: 10px;
  margin: 0px;
  left    :0;
}

.bars li {
  display: inline-block;
  width: 3px;
  background: #eeff00;
  height: 2%;
  -webkit-animation-delay: 1s;
} 

.bars:hover > .bar1 {
  -webkit-animation: play1 1s ease forwards;
}

.bars:hover > .bar2, .bars:hover > .bar3, .bars:hover > .bar4, .bars:hover > .bar5 {
  -webkit-animation: play2 1s ease forwards;
}

.active .bar1 {
  -webkit-animation: move1 infinite 1s linear;
}

.active .bar2 {
  -webkit-animation: move2 infinite 1.2s linear; 
}

.active .bar3 {
  -webkit-animation: move3 infinite .8s linear;
}

.active .bar4 {
  -webkit-animation: move4 infinite 1s linear;
}

.active .bar5 {
  -webkit-animation: move5 infinite .5s linear;
}

.inactive .bar1{
  animation-play-state: paused;
}

.inactive .bar2{
  animation-play-state: paused;
}

.inactive .bar3{
  animation-play-state: paused;
}

.inactive .bar4{
  animation-play-state: paused;
}

.inactive .bar5{
  animation-play-state: paused;
}

.hidden {
  height: 10px !important;
  width: 0 !important;
}

.active:hover > .bar1 {
  -webkit-animation: shift1 1s ease forwards;
}

.active:hover > .bar2, .active:hover > .bar3, .active:hover > .bar4, .active:hover > .bar5 {
  -webkit-animation: shift 1s ease forwards;
}