CSS3 Animations

Introduction

Lately, I’m involved in a very interesting HTML5 project which I’ll tell you about in the future. Meanwhile, I get to “play” with HTML5 and CSS3 specifications. One of the new interesting CSS3 specifications is probably the CSS3 animations. Do these things ring a bell – animated images, simple animation with Flash or JavaScript. If so, this post is for you.

Why Use Animations?

Most of the Web sites and applications today use animations. You can find them in marketing ads embedded inside a site, in animated images while waiting for something like download to finish and in many other places. The added value of animation is that it draws the user’s attention. This is also its drawback since overusing animations can cause distraction and might draw users from the Web site or application. In the past, if you wanted to use animations, you could use animated images, Flash or JavaScript. Today with HTML5, that isn’t necessary. You can use Canvas, SVG or even CSS to achieve the same results.

What is CSS3 Animations?

CSS3 introduces a new CSS module which is called CSS Animations Module Level 3. The module describes how to create simple animations using CSS3 new properties. CSS3 animations are defined with a new @keyframes rule which define the frames of the animation. Combined with the animation properties, you can achieve simple animations that are composed of style changes only.

Defining the Animation

In order to define the animation, you will use the @keyframes rule and give it a meaningful name. Inside the @keyframes block, you must specify a starting and ending point for the animation. You do that using 0% or from value for the starting point and 100% or to value for the ending point. You can also create frames by specifying their percentage in the animation itself. Here is a simple animation definition:

@keyframes changeBackground 
{
   from { background-color: white; }
   50% { background-color: green; }
   to {background-color: white; }
}

The animation here just changes the background from white to green during the running of the animation. You can use any CSS property to create your animations.
Defining the animation isn’t sufficient since it does nothing. In order to run the animation, you will use the animation properties to set it to a DOM element.

The Animation Properties

There are a set of animation functions that are specified in the specification such as animation-name and animation-duration. I prefer to use the shorten animation property that includes those functions. The animation property gets 6 different parameters which are name, duration, timing function, delay, iteration count and direction. If the duration is omitted, then its default value is 0 and the animation won’t run. Also, if the name is ‘none’ value, that will stop a running animation. Here is an example of setting the animation property on some element with the animatedDiv id:

#animatedDiv
{
   animation: changeBackground 2s linear 1s infinite alternate;
}

The animation will run the animation that was defined earlier, for 2 seconds duration, with a linear timing function, with a delay of 1 second, infinite and the direction will be alternate.

Pay attention that most of the browsers added CSS3 animation with their prefix so the previous code won’t work in all browsers. For example, chrome uses the @-webkit-keyframes rule and the –webkit-animation property prefixes.

Summary

CSS3 animations can help to reduce the use of animated images and the use of plug-ins for simple animation. It defines a simple animation model which can be set by defining the animation with the @keyframes rule and using them on elements with the animation properties.