Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save alyssamichelle/803fee3242d563d134d3 to your computer and use it in GitHub Desktop.
Save alyssamichelle/803fee3242d563d134d3 to your computer and use it in GitHub Desktop.
SVG + CSS animation starter file
<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>
.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/*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment