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.

Property Name Type
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

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.

2 thoughts on “CSS3 Transitions: The basics

Leave a Reply