Lately, there have been a slew of great tutorials and examples for using CSS3 to enhance designs and experiences on the web. For a great overview of them I’d suggest checking out Meagan Fisher’s round up. Here I’m going to walk through a technique for enhancing the content of a site using CSS3 animations in an information graphic. The key is that we’ll be enhancing it so that users of browsers that don’t support the needed CSS properties will still get the normal figure and information.
Note: To view the animation, you’ll need to be using one of the latest versions of Safari or Chrome.
What We’re Building
In this example, we’ll be enhancing a typical chemistry figure showing the structure of a Hydrogen atom. We’ll be adding a simple animation that shows the electron revolving around the proton, without the electron path and structure labeling in the animation, when you hover over the figure.
It’s probably a good idea to plan out the animation so that we can tackle it in steps. This is what we’d like to happen: when the reader hovers over the figure we’d like the electron path and labels to fade away and then for the electron to start it’s revolution. Now that we have a plan, let’s get started.
Step 1: Images
There are three images used in this example: the proton, the electron path and labels, and the electron. The proton is static. The electron path and text will fade away as the animation begins. The electron will revolve around the proton.
Step 2: HTML
Next, we’ll code our HTML. Notice that we’ve added an image “hydrogen.png.” This is the regular figure with no animation and this will be served up when styles are not active. We’ll use CSS to hide this image. There are also three empty divs that will be the containers for each of our three images. They’ll be added as background images in the CSS.
<div class="figure">
<div class="figureImage">
<div id="hydrogen">
<img src="images/hydrogen.png" width="150" height="150"
alt="Hydrogen atom" id="hydrogenAtomImage" />
<div id="proton"></div>
<div id="pathCharge"></div>
<div id="electron"></div>
</div><!-- end #hydrogen -->
</div><!-- end .figureImage -->
<div class="figureCaption">
<p><span>Fig. 1:</span> A Hydrogen atom consists
of 1 negatively charged electron (e-) that revolves around 1 positively
charged proton (P+).</p>
</div><!-- end .figureCaption -->
</div><!-- end .figure -->
Step 3: Static Figure Styles
Now onto styling our content. We’ve used absolute positioning to layer the three images for our animation and set the main figure image to not display. Other styling for the container and caption are also included here.
.figure {
width: 275px;
}
.figureImage {
background-color: #fff;
border: 1px solid #ccc;
}
#hydrogen {
display: block;
height: 150px;
margin: 20px auto;
position: relative;
width: 150px;
}
#hydrogen img#hydrogenAtomImage {
display: none;
}
#proton {
background: url('images/proton.png') left top no-repeat;
}
#pathCharge {
background: url('images/pathCharge.png') left top no-repeat;
}
#electron {
background: url('images/electron.png') left top no-repeat;
}
#proton, #pathCharge, #electron {
display: block;
position: absolute;
top: 0;
left: 0;
height: 150px;
width: 150px;
}
.figureCaption {
padding: 0 5px;
}
.figureCaption p {
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
}
.figureCaption p span {
font-weight: bold;
}
Step 4: Fade Out Animation
Now, we can start on the first part of our animation. This will create the fade out and fade in animation when we hover over and leave the figure. The opacity is set at 1 initially and changes to .5 on :hover. -webkit-transition-duration: 500ms; sets the fade to occur over 500ms and -webkit-transition-timing-function: linear; keeps the rate of change constant over the duration.
div.figure #pathCharge {
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: linear;
-webkit-transition-duration: 500ms;
}
div.figure:hover #pathCharge{
opacity: .0;
-webkit-transition: opacity;
-webkit-transition-timing-function: linear;
-webkit-transition-duration: 500ms;
}
Step 5: Electron Revolution
We’ve created an animation for the electron revolution. -webkit-animation-name: revolution; calls the animation named revolution that we’ve defined below. -webkit-animation-iteration-count: infinite; keeps the animation running the whole time the user hovers over the figure. If it was set to 1 then the electron would revolve once and then stop. We’ve also added -webkit-animation-delay: 0.25s; to give the electron path image time to start fading away before this animation begins.
div.figure:hover #electron {
-webkit-animation-name: revolution;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 1.25s;
-webkit-animation-delay: 0.25s;
}
@-webkit-keyframes revolution {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
The Finished Product
This was just a simple example of how CSS animations can be used to enhance figures or diagrams. I’m currently working on two new examples requiring more advanced animations and will post those (with code and explaination) soon. And this was my first tutorial, so hope that you’ve been able to get one or two tidbits from it.
Confetti
Premier Logic
Versite Consulting