The Definitive Guide to CSS Transitions

Back in the golden days of the web, we had a little thing called Flash to help us make the web a dynamic, fun, interactive place. But, Flash is being used less and less. Of course, in certain environments it can still be put to amazing use, but in today’s web environment you need CSS to get the job done.

One of the easiest ways to give your site a near-instant facelift is to bring CSS3 transitions to the table (pun intended). As users interact with various elements on your page, transitions allow for a delayed response that is far more natural and engaging than a jarring, instant response. Case in point, hover over these two boxes and tell me which is more interesting to you.

Drop this into an HTML document and check it out:

[sourcecode language=”html”]

</style>

</head>
<body>

</body>
</html>

[/sourcecode]

Yeah, I know gray boxes aren’t all that exciting, but the point is that the transitions on the box to the right are more interesting and give the design a more polished feel.

Pseudo-Classes for CSS Transitions

The key to making CSS transitions work is through the use of pseudo-classes. You’ve seen these before, even if you didn’t know what they were called. The most common example is probably the a:hover pseudo-class.

[sourcecode language=”css”]

a {
color:#CCC;
background-color:#333;
}

a:hover {
color:#333;
background-color:#CCC;
}

[/sourcecode]

Here we have the CSS element for a link and the pseudo-class “hover” for when the mouse is over the link. Pseudo-classes are subsets of a class. They take on the parent CSS automagically and apply new or different CSS upon interacting.

Some other important pseudo-classes you need to know for CSS transitions include:

hover: obviously.
active: when an element gets clicked
focus: for tab-based selection (accessibility and forms)
target: for matching an on-page ID with a link target

I won’t address the target pseudo-class in this article because it’s rare and is still buggy across browsers. But hover, active, and focus are fully functional (IE10+) and easy to implement.

Introducing CSS Transitions

With all that background out of the way, we can have a more thorough discussion of CSS transitions. They are simply a CSS property that allows you to make the differences between two different CSS elements to change slowly instead of instantly. When you hover your mouse over a button that has a pseudo-class of hover with different color of text and background, the button immediately changes. Transitions allow you to make the change occur more slowly, giving your designs a far more interactive feel.

You can use transitions on just about any CSS element using pseudo-classes: divs, paragraphs, spans, tables and sub-elements of tables, images. Just apply the appropriate pseudo-class and define the CSS change. I stick with background-color for the most part as it creates an interesting effect.

Properties of the CSS Transition

To be thorough, the above example is simply consolidating several CSS Transition properties:

Transition-property: the CSS you want to target for the transition, like color, background-color, width, height, etc
Transition-duration: how long in seconds or milliseconds you want the transition to take.
- For seconds, use an ‘s’ like 2s
- for milliseconds, use ‘ms’ like 2000ms
Transition-timing-function: how the transition merges, meaning that you can adjust to have an eased transition, stepped, or linear. Default is ease, which works for 99% of what I need, but here are the primary attributes:
- ease-in starts the transition slowly and finishes at full speed
- ease-out starts the transition at full speedand finishes slowly
- ease-in-out starts slowly, gets fastest in the middle of the transition, and finishes slowly.
- ease is nearly identical to ease-in-out except it’s a little less dramatic towards the middle of the transition
Transition-delay: also in seconds or milliseconds, defines an amount of time to delay before starting the transition.

Or, you can consolidate all these into a single transition, just keep them in the following order:

[sourcecode language=”text”]

transition: property duration timing-function delay;

[/sourcecode]

A complete example would look like this:

[sourcecode language=”css”]

a {
color:#CCC;
background-color:#333;
transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
-webkit-transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
}

a:hover {
color:#333;
background-color:#CCC;
}

[/sourcecode]

Notice that you will need to use -webkit-transition to make these work in the vast majority of browsers.

In pseudo-code, this would read something like: transition the color of the link, make the transition take 1 second to complete, gently ease in and out of the transition, and delay for half a second (500ms) before making the transition.

You can use a comma-delimited list with the transition to cover all the target properties you want. I prefer to consolidate my transitions into the single CSS attribute, but if you had some very specific transitions you wanted to craft, you may want to break each down.

Where to Place Transitions

I wondered for awhile if I should place the transition in the parent or the child. After all, the following two examples have the same exact effect:

[sourcecode language=”css”]

a:hover {
color:#333;
background-color:#CCC;
}

[/sourcecode]

–OR–

[sourcecode language=”css”]

a {
color:#CCC;
background-color:#333;
}

a:hover {
color:#333;
background-color:#CCC;
transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
-webkit-transition:color 1s ease-in-out 500ms, background-color 1s ease-in-out 500ms;
}

[/sourcecode]

But here’s what I’ve found, I prefer to put the transition in the parent so that all other child elements get the transition. If you want separate effects based upon the situation, you can always provide a different transition specific to that element. But I find that to be extremely rare. 99% of the time I want a consistent transition effect, so I put the transition in the parent element.

Beyond :hover and Links

Two other really important pseudo-classes need to be discussed for this to be a thorough guide: active and focus.

Active is when an items is actually clicked and can have its own separate transitions. While not critical from a design standpoint, this can add a whole other layer of interactivity to your designs.

Focus is for tab-based browsing. I use it on forms and navigation elements primarily, but should be considered any time you need to make your site more accessible.

My focus typically mirrors my hover, simply because they’re about the same thing from a functionality standpoint. This is where delaying the effect by 250-500 milliseconds can be useful so that you users aren’t tabbing through what may look like a Christmas tree as every tabbed element goes through a transition.

Working Sample

Let’s pull all these concepts together into a complete working sample. I like using transitions on menu items:

[sourcecode language=”html”]
<html>
<head>
<style>

/* make the li inline for horizontal menu */
#menu li {
display:inline;
font-size:18px;
margin: 3px 8px 3px 8px;
}
/* initial definitions */
#menu a {
color:#333;
border-bottom: #333 2px solid;
background-color:#fff;
padding:5px;
text-decoration:none;
transition:color 1s ease-out 250ms, background-color 1s ease-out 250ms;
-webkit-transition:color 1s ease-out 250ms, background-color 1s ease-out 250ms;
}

#menu a:hover {
color:#fff;
background-color:#666;
}

#menu a:focus {
color:#fff;
background-color:#666;
}

/* note how I made the transition delay 0ms */
#menu a:active {
color:#333;
background-color:#666;
transition: 1s 0ms;
}

</style>

</head>

[/sourcecode]

Do you rely on CSS3 transitions within your designs?. Would you use it for essential functionality, or just an added layer of polish for those who support it with modern browsers?