CSS Animations first made their appearance in Surfing Safari, the blog devoted to Apple’s Webkit browser. I had to have the most recent nightly build to see the animation, and was, of course, amazed to see leaves fall or basic shape animation (these demos only work in Webkit browsers).

That was two years ago. Since then the standards compliant browsers have picked this up and it has since been submitted as a standard.

Since the release, the transformations have been offloaded to the computer’s graphic chip, meaning that they are smoother and faster than CPU driven animation using Javascript.

Transition Between Pseudo Classes

Transitions describe how CSS properties can be made to change smoothly from one value to another over a given duration. By default, this duration for pseudo classes is instantaneous, as demonstrated by the change when hovering over this element. The change in appearance is the difference between the element’s description and the pseudo class :hover. It goes from background: purple; to background: blue; as soon as the mouse hovers over the element.

Instead of making this change instantaneously, a transition gives this change a duration. You can see that the transition property is specified as a change in the background color, with a duration of 4 seconds. The before and after states are determined by the differences in the element’s description and the description of its hover state.

When you hover over the div, the transition from purple to blue takes 4 seconds.

A good use for this transition effect is to animate the opacity between two pictures.

Adjusting the Rate of Change

The transition velocity can be controlled. In addition to the default transition timing function, there are a number of other timing functions based on 5 predefined cubic bézier curves that control the rate of change during the transition function. Each box below has the same transformation but as you roll over the example, it demonstrates the different transition timing functions, as labeled.

You can create the rate of change curve yourself by specifying the x and y coordinates of the two bézier control handles associated with the starting and end points. In the last example, it is transition-timing-function: cubic-bezier(0,1,1,0);. An ease-in curve would be defined as cubic-bezier(0.42, 0, 1, 1); and an ease-out curve would be defined as cubic-bezier(0, 0, 0.58, 1), the first brings the curve down while the second pushes it over the linear progression of (0, 0, 1, 1). You can try this yourself by changing the numbers below and hovering over the demo above:

This injects a bit of AfterEffects into web presentations, though it is much more limited in scope. There is much more promise of that with CSS3 animations.

What Attributes can be changed?

The W3 has the following list of properties that can be changed in a transition.

Some of them are:

• background-color, image and position
• border-color, width, length, spacing
• color
• crop
• height
• left
• letter-spacing
• line-height
• margin
• max-height
• max-width
• min-height
• min-width
• opacity
• outline-color, offset, width
• padding
• right
• text-indent, shadow
• top
• vertical-align
• visibility
• width
• word-spacing
  integer
• zoom