1. Technology

CSS Transitions

Dressing Up Changing Elements of Your Design


CSS3 introduces a new way to dress up your web pages by adding transitions. Transitions are a way to affect how an element looks as it changes from one state to another. In CSS2 there was no way to affect how an element looked when it was between states, the element was either on or off, one color or another, transparent or opaque. If you wanted to ease the change you had to use JavaScript or a library like jQuery to create those transitions. CSS3 transitions asks the browser to do the transition with the designer making the decisions without needing to know any scripting languages. But in March 2009, the W3C CSS working group posted the CSS Transitions module. And this module was based on the transition support included in Webkit and Mozilla.

Browser Support for CSS Transitions

The first big concern that many web designers have is for browser support. I could go into my standard rant about iterative design, progressive enhancement, and adding features that don’t have 100% browser support yet, but I know you just want the list, so here goes:

  • Safari and Chrome (Webkit) have supported transitions since version 3.1 (using -webkit- prefix)
  • iOS (iPhone and iPad) got it in version 3.2 (using -webkit- prefix)
  • Android began supporting transitions in version 2.1 (using -webkit- prefix)
  • Opera started supporting them in version 10.5 (using -o- prefix)
  • Opera Mobile started working in version 10 (using -o- prefix)
  • Firefox got them in version 4 (using -moz- prefix)
  • Internet Explorer will get them in version 10 (using -ms- prefix)

Before that last line sends you screaming for the hills, keep in mind what transitions do. As I said above, they soften the change of dynamic elements. And more importantly, they haven’t been common on most web pages because you could only do them with scripts. So most readers won’t miss them if they are gone. But think how great your site will look when a reader finally upgrades to IE 10 and suddenly finds all these fabulous transitions.

Create a Simple Fade Transition

In order to create a CSS transition, you need to define three things:

  • the property or properties to transition
  • the length of time for the transition
  • the timing function

You should first define what property or properties you want to transition. You use the transition-property property for this. And it takes the values:

  • none—Nothing transitions
  • all—Every style property assigned to the element will transition
  • specific property names separated by spaces

For example, to transition the color of a link when you hover over it, you would write:

a:hover { transition-property: color; }

The length of the transition is defined by the transition-duration property. This is defined in seconds (s) or milliseconds (ms). If you set the value of the transition to zero (0) or a negative value, the transition will be immediate with no animation. To set a transition to take 3 seconds to complete you would write:

transition-duration: 3s;

The transition timing is the most technical of the three values, as it defines how the browser should find the intermediate values during a transition. You can define the transition timing with one of several keywords:

  • ease—the default
  • ease-in
  • ease-out
  • ease-in-out
  • linear
  • cubic-bezier(number, number, number, number)

The first five keywords are built into the browser while the sixth one (cubic-bezier) allows you to define your own transition curve.

Unless you are a math whiz, it’s easiest to just try out all five keywords to see which one looks the best to you. Note that when you’re doing a short animation (5 seconds or shorter) it can be very difficult to see the difference between the functions. I tend to leave it on ease or linear most of the time.

To set a transition to a linear function, write:

transition-timing-function: linear;

There is one other property you can set on your transitions: transition-delay. This is a time for when the transition should start. You can use positive or negative values or zero. Zero is the default and sets the transition to start immediately. A negative value starts immediately, but puts the transition further into the process so that it appears to begin part-way through the cycle.

To start a transition 1/4 of a second after the initiation, write:

transition-delay: 0.25s;

Finally, to bring it all together, there is a shorthand property you can use, transition. It works like this:

transition: transition-property transition-duration transition-timing-function transition-delay

If you want to set different transitions on the same element, you can define them by separating them with a comma. For example if you want the color to change over 3 seconds and the background color to change over 2 seconds you would write:

transition: color 3s ease, background-color 2s ease;

See the transitions in action. View CSS Transition Examples.

Browser Prefixes

Transitions, as I said above, are supported in nearly every browser, but in order to get them to work you need to use browser prefixes. You should always place the browser prefix versions of a property first in your style sheet with the official property name last. This ensures that when the property moves from draft to final status, that version takes precedence over the prefixed versions.

The table below shows the prefixed versions of the various transition properties.

CSS Browser Prefixes for Transitions

CSS3 Property Chrome/Safari/Android/iOS Firefox Opera Internet Explorer
transition -webkit-transition -moz-transition -o-transition -ms-transition
transition-property -webkit-transition-property -moz-transition-property -o-transition-property -ms-transition-property
transition-duration -webkit-transition-duration -moz-transition-duration -o-transition-duration -ms-transition-duration
transition-timing-function -webkit-transition-timing-function -moz-transition-timing-function -o-transition-timing-function -ms--transition-timing-function
transition-delay -webkit-transition-delay -moz-transition-delay -o-transition-delay -ms-transition-delay

©2014 About.com. All rights reserved.