CSS3 Animation

Olympic runner
With CSS3 animations now being supported in so many browsers (Chrome, Safari, Firefox, Internet Explorer and Opera) here is a brief introduction to show you how simple they are. (Code downloads at the end of the tutorial)

On your marks...


slow to start

slow to finish

fast middle

There are 2 parts to an Animation:

  • A style that defines the animation
  • and a set of keyframes that define the start, end and possible intermediate states of the animation style.

And the above is all you need for the basics. No Javascript or other scripting language. The above says to animate all h2 elements in red with the animation lasting 5 secs. The animation starts with a left margin of 75% and ends with a left margin of 0%. On the way the font size is increased to 300%

The olympic runners use the same basic structure but add in a couple of extra lines of code. Here is the HTML

and then the CSS...

The animation-timing-function line allows you control over how the animation proceeds. We set the animation-iteration-count to 2 and the animation-direction to "alternate" which creates the effect of the runners going forward and then coming back. Some others you might want to learn about...

animation-nameDefines a list of animations to apply
animation-durationTime to complete one cycle
animation-timing-functionApplies between keyframes
animation-iteration-countNumber of times the animation plays
animation-directionnormal, reverse, alternate
animation-play-staterunning or paused
animation-delaystart delay
animation-fill-modeforwards, backwards, both or none

The Transform property is also worth experimenting with

Start | Stop

Note: At present different broswers need different prefixes (e.g. "-webkit-animation-duration" and -moz-animation-duration instead of just "animation-duration". You should specify all the different variants so as to be compatible with all the different browsers.).

There is a good resource here which should give you some ideas about what can be animated. The "li" elements have their "letter-spacing" animated on this page. Do a reload now to see it in action.

  • Remember that animations override all normal rules but are overridden by !important rules
  • If at one time there are many animations running then the name that occurs last in the value of 'animation-name' will override the others.
Hope you enjoyed the tutorial. It was more of a demo of a few techniques rather than a step by step tutorial but hopefully it will inspire you to find out more. There is a colour change animation on this paragraph. Hover over it to see


H2 in red slide demo 1
Olympic runners demo 2
LI expanding demo 3
Colour change on hover demo 4
Rotate Transform demo 5

Spinning Cube demo 6

back to top