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
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.
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-name||Defines a list of animations to apply|
|animation-duration||Time to complete one cycle|
|animation-timing-function||Applies between keyframes|
|animation-iteration-count||Number of times the animation plays|
|animation-direction||normal, reverse, alternate|
|animation-play-state||running or paused|
|animation-fill-mode||forwards, backwards, both or none|
The Transform property is also worth experimenting with
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.
Downloads:Spinning Cube demo 6