Growing-Shrinking-Bars in HTML

HTML-

<div class="logo-holder">
  <div class="bg"></div>
  <div class="bar"></div>
  <div class="bar fill1"></div>
  <div class="bar fill2"></div>
  <div class="bar fill3"></div>
  <div class="bar fill4"></div>
  <div class="bar fill1"></div>
  <div class="bar fill5"></div>
  <div class="bar fill6"></div>
  <div class="bar"></div>
</div>

--------------------------------------------------------------
CSS-

@keyframes fill {
  0%   { width: 0; }
  33%  { width: 30px;}
  66%  { width: 10px;}
  100% { width: 105px; }
}

@keyframes fill-1 {
  0%   { width: 0; }
  33%  { width: 50px;}
  66%  { width: 20px;}
  100% { width: 130px; }
}

@keyframes fill-2 {
  0%   { width: 0; }
  33%  { width: 90px;}
  66%  { width: 70px;}
  100% { width: 136px; }
}

@keyframes fill-3 {
  0%   { width: 0; }
  33%  { width: 50px;}
  66%  { width: 24px;}
  100% { width: 109px; }
}

@keyframes fill-4 {
  0%   { width: 0; }
  33%  { width: 98px;}
  66%  { width: 34px;}
  100% { width: 99px; }
}

@keyframes fill-5 {
  0%   { width: 0; }
  33%  { width: 30px;}
  66%  { width: 10px;}
  100% { width: 148px; }
}


@keyframes fill-6 {
  0%   { width: 0; }
  33%  { width: 48px;}
  66%  { width: 22px;}
  100% { width: 140px; }
}

@keyframes colors {
  0% { background-color: #5a5a5a;}
  50% { background-color: #3a3;}
  100% { background-color: #6a6a6a;}
}