CSS3 Transitions: The basics

The current CSS3 Transitions module says, “CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration.” The following properties are used to create rules for transitions:

• transition-property—the CSS property to which the transition will apply
• transition-duration—the length of time the transition will take, given in seconds
• transition-timing-function—allows transitions to “ease-in” or “ease-out” through intermediate stages
• transition-delay—allows the start of a transition to be delayed, values given in seconds

There is a shorthand syntax for applying all four of the transition properties in one rule.

Not all browsers support CSS3 at the current time, which means that the transition effect will only work on certain browsers or when webkit and moz and Opera workarounds are added to the rule. So, you can get transitioning to work in some browsers with rules like:

a:hover {
color:#666;
-webkit-transition:color .5s ease-in;
-moz-transition:color .5s ease-in;
-o-transition:color .5s ease-in;
transition:color .5s ease-in;
}

That rule demonstrates the shorthand syntax. In order, the properties set in shorthand are the property to be transitioned (color), the duration of the transition (.5 second), and the type of transition (ease-in). Without the webkit, moz, and o declarations, the full rule (not in shorthand) would be:

a:hover {
color:#666;
transition-property:color;
transition-duration:.5s;
transition-timing-function:ease-in;
}

Of the CSS3 properties, the following can have transitions applied. These are the animatable properties.

Some examples you might enjoy playing with can be found in the following articles. You must view these with one of the supporting browsers to see anything happen.

• Sexy Interactions with CSS Transitions at Carsonified
• CSS Transformations, Animations, And Transitions Examples at Vision Media
• CSS Transitions 101 at Web Designer Depot