OCT
Create an Animated Bar Graph using CSS3 Keyframing
Posted by Zak under Design, Programming
If you’ve read any web design blog written in 2011 you’ll hear that CSS3 is a great, simple tool to add interactive elements to a website. It’s popularity seems to coincide with the widespread adoption of modern browsers like Chrome and Firefox.
I’ve been reading a lot of tutorials on CSS animations in particular but haven’t come across many practical applications of these properties. Sure, it can be wacky to make a GIF fly around the screen in pure CSS but these new effects need to be able to enhance the user experience.
Here’s how to create a quick animated bar graph using CSS keyframing. For the sake of demonstrations, I’ve made a simple Yes or No poll.
The Result
The HTML
<body> <h1>Do you believe in horoscopes?</h1> <h3>Yes</h3> <div id="yes"><p class="percent">35%</p></div> <h3>No</h3> <div id="no"><p class="percent">65%</p></div> </body>
All very self explanatory. The percentage classes are going to render the animation.
First Part of the CSS Animation
.percent {
height: 20px;
text-indent: 5px;
text-decoration: none;
color: #fff;
-webkit-animation-name: results;
-moz-animation-name: results;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
}
Here’s where we setup the results bars. The first animation property animation-name lets us declare which animation should be played. This is similar to calling a function in Javascript. The other animation properties allow us to configure the animation speed, number of iterations (1 to infinity) and physical properties. Notice each property is prefixed with -webkit or -moz for webkit supported browsers and Firefox. I’ve intentionally left out the straight animation call as there doesn’t seem to be any support for it at this stage.
Second Part of the CSS Animation
#yes {
width: 200px;
}
#yes .percent {
background-color: green;
}
#no {
width: 500px;
}
#no .percent {
background-color: red;
}
As I mentioned, this is a quick demonstration so I’ve hard-set the widths of each poll and made the Yes bar green and the No bar red. If you were to seriously implement it, the polls would be sent as a variable and the widths would be worked out and output as inline CSS or possibly Javascript.
Third Part of the CSS Animation
@-webkit-keyframes results {
0% {
width: 0;
opacity: 0.5;
background-color: red;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}
@-moz-keyframes results {
0% {
width: 0;
opacity: 0.5;
background-color: red;
}
90% {
width: 105%;
}
100% {
width: 100%;
opacity: 1;
}
}
After countless tests, it appears these 2 CSS functions need to be declared separately. As you can see I’ve setup the results function we setup earlier and declared properties based on a percentage. These are processed as percentages of the overall animation – similar to frame-by-frame animation. 0% is the first frame in the animation, 90% is almost at the end and 100% is the end of the animation.
The best part is you’re unlimited in how many frames you can declare! Using the principles of squash and stretch animation, I’ve set a keyframe at the 90% mark which increases the width of the bar a touch more than where it sits at 100%. This gives the animation some snap back.