CSS3 animated bargraph

by DJS Baker

HTML

<ul class="graph">
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
    <li class="four"></li>
    <li class="five"></li>
</ul>

CSS

body {margin: 0; padding: 0; background: #000;}

@keyframes one {from {opacity: 0; height: 0px;} to {opacity: 1; height: 50%;}}
@-moz-keyframes one {from {opacity: 0; height: 0px;} to {opacity: 1; height: 50%;}}
@-webkit-keyframes one {from {-webkit-opacity: 0; height: 0px;} to {-webkit-opacity: 1; height: 50%;}}

@keyframes two {from {opacity: 0; height: 0px;} to {opacity: 1; height: 70%;}}
@-moz-keyframes two {from {opacity: 0; height: 0px;} to {opacity: 1; height: 70%;}}
@-webkit-keyframes two {from {-webkit-opacity: 0; height: 0px;} to {-webkit-opacity: 1; height: 70%;}}

@keyframes three {from {opacity: 0; height: 0px;} to {opacity: 1; height: 30%;}}
@-moz-keyframes three {from {opacity: 0; height: 0px;} to {opacity: 1; height: 30%;}}
@-webkit-keyframes three {from {-webkit-opacity: 0; height: 0px;} to {-webkit-opacity: 1; height: 30%;}}

@keyframes four {from {opacity: 0; height: 0px;} to {opacity: 1; height: 10%;}}
@-moz-keyframes four {from {opacity: 0; height: 0px;} to {opacity: 1; height: 10%;}}
@-webkit-keyframes four {from {-webkit-opacity: 0; height: 0px;} to {-webkit-opacity: 1; height: 10%;}}

@keyframes five {from {opacity: 0; height: 0px;} to {opacity: 1; height: 90%;}}
@-moz-keyframes five {from {opacity: 0; height: 0px;} to {opacity: 1; height: 90%;}}
@-webkit-keyframes five {from {-webkit-opacity: 0; height: 0px;} to {-webkit-opacity: 1; height: 90%;}}


.graph {width: 450px; height: 200px; margin: 30px  auto; background: #fff; overflow: hidden; position: relative;}
.graph li {width: 80px; background: #ccc; float: left; margin: 0 5px; display: inline;}


.one {height: 50%; animation: one 2s ease-out; -moz-animation: one 2s ease-out; -webkit-animation: one 2s ease-out; position: absolute; bottom:0; left: 0px;}
.two {height: 70%; animation: two 2s ease-out; -moz-animation: two 2s ease-out; -webkit-animation: two 2s ease-out;position: absolute; bottom:0; left: 85px;}
.three {height: 30%; animation: three 2s ease-out; -moz-animation: three 2s...