CSS3: Transitions

CSS3 transitions smooth out value changes in your stylesheets when triggered by interactions like hovering, clicking, and focusing.

This smoothing animates the changing of a CSS value when triggered by a mouse click, focus or active state, or any changes to the element (including even a change on the element’s class attribute).

Let’s start with a simple example, where we’ll add a transition to the background color swap of a link. When hovered over, the link’s background color will change, and we’ll use a transition to smooth out that change, an effect previously only possible using JavaScript, but now possible with a few simple lines of CSS.

Next, we’ll add a declaration for the normal link state with a little padding and a light green background, followed by the background swap to a darker green on hover.

Now let’s add a transition to that background color change. This will smooth out and animate the difference over a specified period of time.

For the time being, we’ll use only the vendor-prefixed properties which currently work in WebKit-based browsers (Safari and Chrome) to keep things simple. Later, we’ll add vendor prefixes for Mozilla and Opera.


You’ll notice the three parts of a transition in the declaration:

The timing function value allows the speed of the transition to change over time by defining one of six possibilities: ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier.

Delaying The Transition

Transitions can be delayed from the moment the trigger happens on screen. For example, let’s say we wanted the background transition to happen half a second after the link is hovered over. We can do that using the transition-delay property.

Shorthand Transitions

We could simplify the (non-delayed) declaration significantly by using the transition shorthand property.

Now we have a much more compact rule that accomplishes the same result.

If we wanted to add back in the half-second delay to the shorthand version of the transition, we can do that by placing the duration value at the end of the rule, like this:

Now sure, all of this wonderful transitioning works just fine in WebKit browsers, but what about the others?

Browser Support

Transitions were initially developed by WebKit, and have been in Safari and Chrome since version 3.2, Opera supports them as well in version 10.5  and support is available in Firefox 4.0 and up.

Building the Full Transition Stack

Here’s a revised declaration, adding the –moz- and –o- prefixes as well as the actual CSS3 transition property. Again, we’re putting the non-prefixed property last in the stack to ensure that the final implementation will trump the others as the property moves from draft to finished status.

With that stack, we’ll be smoothing out that background color change in current versions of Safari, Chrome, and Opera, as well as future versions of any browser that chooses to support it.

Why Not Use JavaScript Instead?

You might be wondering, with not all browsers supporting (or at least promising support for) CSS Transitions, why not use a JavaScript solution to handle the animation?

Popular frameworks such as jQuery, Prototype, and script.aculo.us have enabled animations via JavaScript that work cross-browser for some time now. It all depends on how crucial the transitions are to the experience. I’m stressing here that you can embrace the simplicity and flexibility of CSS3 if you choose the appropriate parts of the user experience to apply it: enriching the interactions that happen on the page.

Quite often, the animation of these interactions when handled by CSS transitions aren’t integral to the brand, readability, or layout of the website. Therefore, a few simple lines of CSS to trigger a simple animation that’s native to the browsers that support it (rather than tapping into a JavaScript framework) seems like a smart choice.

Be Smart, Be Subtle

Like all shiny new tools, it’s important to use transitions appropriately. One can easily go overboard adding transitions to everything on the page, resulting in some sort of annoying, pulsating monster. It’s key to decide where transitions rightfully enrich the user experience and when they are just extraneous noise. Additionally, making sure the speed of the transition doesn’t slow down an otherwise snappy action from the user is crucial. Use with care and caution.

Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Leave a Reply

Your email address will not be published. Required fields are marked *