SVG + CSS animation starter file

index.html

<div class="wrap">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%"
     height="66px" viewBox="0 0 219.5 66" enable-background="new 0 0 219.5 66" xml:space="preserve">
  <g>
    <rect class="fill" x="4.583" y="5" fill="#72CC58" width="198.879" height="56"/>
  </g>
  <g>
    <path class="outline" fill="#231F20" d="M219.5,14.25h-11.456V0H0v66h208.044V51.75H219.5V14.25z M198.879,56H9.165V10h189.714V56z"/>
  </g>
  </svg>

</div>

style.css

.wrap {
  width:40%;
  margin:4em auto;  
}

.outline {
  fill:#333;
}

.fill {
 animation: charge 1s linear, col 1s linear;
}

@keyframes charge {
  0% {transform: scaleX(0.4);}
   100% {transform: scaleX(1);}
}

@keyframes col {
  0% {fill: red;}
  60%, 90% {fill: yellow;}
  100%{fill: #98c559;}
}






/*http://www.opera.com/docs/specs/presto25/svg/cssproperties/*/

SVG + CSS animation starter file.markdown

SVG + CSS animation starter file ('-' * 32)

Forked from Val Head's Pen SVG + CSS animation starter file.

A Pen by Alyssa Nicoll on CodePen.

License.