Enhance Your Sites with CSS3 Animations

The W3C's CSS 'Animations' module has taken a while to catch on. With limited browser support, it has not proven to be one of the mostly widely used CSS3 properties. It's been available in Webkit based browsers for ages – Chrome since version 2 and Safari since version 4, but no support in Opera, IE and Firefox... until now. Firefox 5 however came out recently and with it came support for the animations module. Rumor has it that Opera will follow. With global support for the feature now estimated at around 25%, it’s time to start having some fun!

This article provides an introduction to CSS3 animations and an explanation of the syntax involved. We will then take a look at a more advanced use of CSS animations before finishing with some 'real world' animation ideas and how you can apply these to your sites today.

Enhance Your Sites with CSS3 Animations


What are CSS3 Animations?

CSS3 Animations consist of a series of different visual states for an element to adopt in order. To define each of these states, a number of keyframes are set at intervals across the duration of the animation. These intervals are defined using percentages and each interval will introduce one or more CSS styles. The animation must then be attributed to an element and various options relating to how the animation should play can be set.

Example: A Basic Keyframe Animation

In the below example you can see that we have defined three different states for an element to adopt at different points in the animation. We have given it an identifier of 'colours'.

/* Defining a basic animation */
@keyframes colours {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}

/* Activating the animation */
body {
    animation-name: colours;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

Note: In the W3C working draft the animation identifier is contained within single quotes. Firefox doesn’t seem to like this and only works without the quotes. Webkit works with or without quotes.

To activate the animation, all that needs to be done is to apply the animation-name CSS style to the element to be animated. In this example we have applied the animation 'colours' to the element. This will make the background of our web page slowly change colour from red to green to blue. Animations come with a set of defaults and to override these we have set the animation-timing-function (transition style - e.g. ease-in, or see custom cubic-bezier timing functions), animation-iteration-count (number of times to repeat) and 'animation-duration'.

Animation styles can also be written out in shorthand using just animation followed by a list of properties. For a full explanation of all of the different CSS3 animation properties, see the W3C draft.

Note: The above example won’t work if you simply copy and paste the styles. CSS3 animations require browser prefixes. These have been stripped out of this example for clarity. –webkit- must be placed in front of Chrome/Safari styles and –moz- must be placed in front of Firefox styles. This is slightly annoying as it means that animations must essentially be defined twice (or three times if you wish to provide a future-proof version without any prefixes).

Diving in at the Deep End...

Madmanimation by Andy Clark et al is a fantastic example of how CSS3 animations can be used in a more advanced manner to actually create a short movie. To take a very simplistic overview, this basically works by attributing each animation to an element with a class of .go added to the CSS selector. For example:

#scene-one .go { animation-name: scene-one; }

The .go class isn’t present in the HTML mark-up so the animation doesn’t play on page load. The .go class is instead injected via JavaScript into the HTML at intervals. As soon as an element receives its .go class it can then play.

function playSceneOne() { $('#scene-one').addClass('go'); }

It is well worth picking through the well-commented HTML, CSS and jQuery to further understand how it has been done.

An application called Animatable is on its way from the team behind Madmanimation. This is essentially a browser-based GUI for creating complex CSS animations.

CSS3 Animations for the Real World

Whilst sites such as Madmanination are very impressive and demonstrate the huge potential of CSS based animations, these ideas are not particularly useful for creating movies today. With potentially three-quarters of your users not being able to see your movie because of browser incompatibilities, you are probably better off spending your time developing a more accessible solution with JavaScript, Canvas or Flash.

Like other CSS3 properties however, animations can be used as part of a 'progressive enhancement' strategy. Subtle use of animation for non-crucial effects can provide a finishing touch that can turn a site from good to great. Check out Kaleidoscopeapp in Chrome or Safari. Notice the slowly moving colour wheel in the logo? It’s cool right? This could be achieved with a CSS keyframe animation.

I've created a demo page demonstrating five very quick and simple ideas for CSS3 animation enhancements you could apply to your designs today. I have shown the complete code (-moz- and –webkit- prefixes) in the first example. For the remaining examples I have just shown the Firefox versions. The source code of the demo shows both.

Note: Must view in Firefox, Safari, or Chrome.

1. Drop-Down Header

By animating the relative position of the

element we can apply an effect whereby the header slowly drops into place upon page load. This will degrade gracefully as those who are using older browsers simply won’t see the effect.

header {
    /* Basic Styles */
    background: black;
    color: white;
    height: 100px;
    position: relative;
}

We start with some basic styles. We have set a height of 100px, a background colour and text colour and importantly we have set the 'position' to 'relative'. This will allow us to use the ‘top’ property to adjust the element's position. Next we need to define our animation.

@-moz-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}
@-webkit-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}

We have called the effect header-drop. The only property that we are animating in this effect is the relative position of the element. The header has a height of 100px, so to bring the element out of view at the start of the animation, we need to set our 0% marker to top: -100px. At the end of the animation we want the element to be shown in full view so we’ll set our 100% marker to top: 0px;. All we need to do next is to apply the animation style to the header element as well as set the animation-timing-function, animation-iteration-count and animation-duration.

header {
    /* Basic Styles */
    background: black;
    color: white;
    height: 100px;
    position: relative;
	
    /* Firefox 4+ */
    -moz-animation-name: header-drop;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 1s;
	
    /* Webkit */
    -webkit-animation-name: header-drop;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: once;
    -webkit-animation-duration: 1s;
}

2. Colour Animate a Knockout PNG

This idea was nicked from Chris Coyier over at CSS Tricks. We basically take a PNG image with a transparent shape knocked out, and animate the background colour. Here we have set the background colour (which shows through the PNG) to slowly transition between red to green to blue.

Colourtron Example

#logo {
/* Ensure that you set a background colour for browsers that don’t support animations */
    background: red; 
    -moz-animation-name: colour-change;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 30s;
}

/* Set Animation */
@-moz-keyframes colour-change {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}

3. CSS3 Loading Spinner

This idea was inspired by an article on 24ways.org by Tim Van Damme. Here he creates a loading-spinner by animating a 360-degree rotation on an image. I decided to try to make a CSS only version by playing around with the ‘border’ property.

Loading Spinner Example

.spinner {
    height: 10px;
    width: 10px;
    border: 10px solid #888;
    border-radius: 20px;
	
    -moz-animation-name: loading;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1s;
}

Here I have set a thick 10px grey border around a 10px x 10px div. I’ve then applied a border-radius to make this into a circle. During the animation we swap between making the top, right, bottom and left borders black to create a rotating effect. You could use Modernizr to replace the spinner with a GIF in older browsers, or just leave it as a static icon.

@-moz-keyframes loading {
    0% { border-top: 10px solid black; }
    25% { border-right: 10px solid black; }
    50% { border-bottom: 10px solid black; }
    75% { border-left: 10px solid black; }
    100% { border-top: 10px solid black; }
}

4. Pulsating Error Input

This idea was inspired by the radioactive button effect I first saw on Zurb. By animating the box-shadow CSS3 property, we can make our text error inputs (or indeed any other element) display a pulsating-glow effect. We could use the jQuery validation plugin to apply an .error class to the input box which would have a CSS3 animation style assigned to it. In the animation we basically transition between a 5px blurred box-shadow to a 15px box-shadow. We’ve set the animation-direction to alternate so that the animation alternates between playing forwards and backwards.

Glow Example

input[type="text"].error {
    border: 1px solid #D11919;
    border-radius: 6px;	
	
    -moz-animation-name: glow;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 500ms;
}
@-moz-keyframes glow {
    0% { box-shadow: 0 0 5px #D11919; }
    100% { box-shadow: 0 0 15px #D11919; }
}

5. 'Shakey' Input Error

This is another idea that would probably be best implemented with something like the jQuery validation plugin. The idea is to 'vibrate' the form box to show that it has not been filled-in properly or that a password was incorrect. This effect has been quite popular on several interfaces including Mac OSX. Like in the first example, all we are doing is animating a change in position of the form input box. Ensure that the position is set to relative to allow us to adjust the position left from -10px to (+)10px.

form {
    background: #CCC;
    border: 1px solid #888;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    position: relative; 
	
    -moz-animation-name: shakey;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 200ms;
}
@-moz-keyframes shakey {
    0% { left: -10px; }
    25% { left: 10px; }
    50% { left: -10px; }
    75% { left: 10px; }
    100% { left: 0px; }
}

Note: Must view in Firefox, Safari, or Chrome.

Your Turn

Have you seen any excellent examples of animation used as a part of progressive enhancement? Do you use CSS3 animations in your work? Do you have any neat little animation tricks that you like to use? Or would you rather just use JavaScript or another method?

Opinions expressed in this article are those of the author and not necessarily those of Onextrapixel.