Web Design Superpowers Collection: CSS Animation

Web Design Super Powers CollectionIn my post on the evolution…more correctly, regeneration…of the Dr. Who logo over it’s 50+ year history I wanted to add a bit of flair by making the TARDIS, the Doctor’s Time Machine, materialize after the page loaded. Using CSS3’s @keyframes rule I was able to create a nice materialization effect. Go ahead and have a look at the effect if you can’t wait until the end of the article.

Defining the Animation

The first step was to define the animation keyframes. Since I wanted the TARDIS to materialize, I needed a way for the opacity of the TARDIS image to go from 0% to 100%. The code below shows how simple this was using the @keyframes rule.

CSS
@-moz-keyframes materialize {
from { opacity: 0; }
to { opacity: 100%; }
}
@-webkit-keyframes materialize {
from { opacity: 0; }
to { opacity: 100%; }
}
@keyframes materialize {
from { opacity: 0; }
to { opacity: 100%; }
}

As you’ll notice from the code above, there’s a little good and bad news when using the @keyframes rule. It is supported by Mozilla and Webkit browsers when using the vendor prefixes -moz and -webkit. It means a bit of extra coding but it gets animation working in Safari, Chrome and Firefox. IE10 supports the @keyframe rule but users of earlier IE versions and Opera won’t see the animation. So all in all, @keyframe is fairly widely supported and on the upside using it won’t break your design in less capable browsers.

Anatomy of the @keyframes Rule

Setting up the animation keyframes is easy. Here’s the syntax for @keyframes:

CSS
@keyframes [animation name] {
from { [CSS rules] }
to { [CSS rules ] }
}

This rule will apply CSS rules starting at the beginning of the animation and then transition to new CSS rules when the animation reaches it’s end.

If you need more granular control, just use the @keyframes rule with percentages representing markers within the duration of the animation. With this method you can apply many different styles at other points in the animation between the beginning (0%) and the end (100%). So you could apply different styles at 25%, 50%, etc.

CSS
@keyframes [animation name] {
0% { [CSS rules] }
100% { [CSS rules ] }
}
Calling the animation

Now that the keyframes have been defined the animation can be called using the animation property. In my TARDIS example, the animation is applied to an image with the class tardis. As with the @keyframes rule, animation is not natively supported by any browsers, so -moz and -webkit prefixes have to be used. Have a look below.

CSS
img.tardis {
-moz-animation: materialize 5s 3 alternate ease-in-out;
-webkit-animation: materialize 5s 3 alternate ease-in-out;
animation: materialize 5s 3 alternate ease-in-out;
float: right;
height: auto;
margin: -80px 0 0 20px;
width: 350px;
}

Here’s the syntax of the animation property:

CSS
animation: animation-name duration delay iteration-count direction timing-function;

Let’s go into a little detail on the animation property as I have it setup for the TARDIS materialization effect.

  1. animation-name = materialize:
    The name of the animation defined in the animation @keyframes rule.
  2. duration = 5s:
    The number of seconds (or milliseconds) the animation will last. Simply put, the larger the number the longer the time between the beginning of the animation (0%) to the end (100%).
  3. delay = (not used):
    The number of seconds (or milliseconds) to wait before beginning the animation. Default is 0.
  4. iteration-count = 3:
    The number of times the animation should play.
  5. direction = alternate:
    Defines the direction the animation should play. For the TARDIS, the animation alternates from forward to reverse. This means it first plays from 0% to 100%, 100% to 0% and finally 0% to 100% on the third iteration.
  6. timing-function = ease-in-out:
    Specifies the speed curve of the animation. The speed curve defines the TIME an animation uses to change from one set of CSS styles to another so the changes occur smoothly.

I won’t bore you with the details of every property of the animation property, but there are some great online resources for understanding how each one works. I used Web3Schools.com.

So now my TARDIS image will materialize before astounded viewers’ eyes. One note, since the TARDIS fades in and out before finally coming to rest, I discovered I had to use iteration-count and direction so the image will fade in, out and in to replicate the TARDIS effect. I spent a few frustrating hours trying to make it work using different opacities triggered at different points in the animation. All to no avail.

Seeing is Believing

Here’s a demo of my CSS TARDIS materialization effect. Hover over the TARDIS to see the animation in action.

BONUS! I’ve also added the TARDIS materialization sound to the effect using the HTML5 audio tag and a bit of javascript. Hover and enjoy!

HTML
<audio loop preload="auto" id="groan">
<source src="http://www.mackrichardson.com/wp-content/uploads/2013/01/tardis.mp3" type="audio/mpeg"></source>
<source src="http://www.mackrichardson.com/wp-content/uploads/2013/01/tardis.ogg" type="audio/ogg"></source>
Your browser does not support the audio tag.
</audio>
Javascript
<script type="text/javascript">
var audio = jQuery("#groan")[0];
  jQuery("a.tardis").mouseenter(function() {
		    audio.play();
  	});
  jQuery("a.tardis").mouseout(function() {
    audio.pause();
    audio.currentTime = 0;
  });
</script>