Valid HTML5

CSS3 Demos


Much like Transitions and Transforms, animations are a relatively new feature that allows the creation of visually dynamic page elements. Unlike the former properties, animations can be controlled in detail, with multiple sets of dynamic properties in the same declaration. For example, an element can travel down into position, rubber a couple of times and come to rest. Animations don't require a state change (e.g. a mouse hover) to be triggered, although they can work that way.

Declaring an animation is a two-step process; first you need to state the properties that will change at each keyframe of the animation (a keyframe is a step during the animation; the browser will interpolate the element's properties in-between each keyframe). Second, you need to apply that set of keyframes to one or more elements - there are several optional properties that determine how it will work. Sets of keyframes are given a name for this purpose.

Note that once established by name, a given animation can be called by assorted elements on a site, each of which can use it in a different way (slower or faster, repeating, reversing, with different acceleration and so on). These properties are animation-name, animation-duration, animation-timing-function, animation-iteration-count, animation-direction, animation-delay, animation-iteration-count and animation-fill-mode; there is a useful shorthand notation available, thankfully.

A good walkthrough can be found on MSDN, of all places.

Rubber biscuit