CSS Transitions: A Simple Way To Delight Your Visitors

Posted: 07 Nov 2011 04:30 AM PST

We all want our designs to be functional and usable. We want visitors to easily complete tasks and find what they want. We’d also like to delight them and make their experience enjoyable and memorable.

CSS3 transitions are an easy way to begin creating that delightful experience.

I’ve built a demo of a navigation bar with and without transitions applied. Mouse over the menu items to see the difference transitions can make.

With every post about css3 something needs to be said about browser support. There’s a section below on support, but for the most part it’s pretty good as long as you remember to use vendor prefixes and aren’t using IE.

Without IE support you might think that transitions aren’t ready for prime time just yet, but this is one area where you can safely use css3 even if it won’t work across all browsers.

In his book CSS3 For Web Designers, Dan Cederholm points out that we can divide the visual experience on websites into two categories:

critical — branding, usability, accessibility, layout
non-critical — interaction, visual rewards, feedback, movement

You shouldn’t use the latest and greatest technology for the critical items, but they’re fine to use for the non-critical and transitions play more into the non-critical.

Remove transitions and visitors will still get a fully functional and usable design. They’ll simply be missing a little extra delight.

How to Use CSS3 Transitions

The W3C offers the following clear and simple definition of transitions.

CSS transitions allow property changes in css values to occur smoothly over a specified duration.

Transitions are about having changes happen over some duration instead of instantly. In their simplest form they make these changes less jarring and in more complex forms they allow us to create some interesting animations

There are 4 transition properties we can use:

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

Each is quite simple to understand and put to use.

transition-property

The transition-property defines what properties the transition will apply to. It accepts values of none (the default), all, or a single css property or comma separated list of properties.

 nav a {   transition-property: background-color; }

The above says that any time the background-color of a link inside the nav element changes a transition should be used.

Transitions can be applied to any element as well as the :before and :after pseudo classes.

transition-duration

A time frame is the key component of a transition so it should be no surprise there’s a property to define this time frame. The transition-duration property takes a time as a value, usually expressed in seconds (s)

 nav a {   transition-duration: 0.5s; }

The above tells us the transition we’re applying to nav links should occur over a duration of half a second from start to end.

The default value is 0, which is the same immediate change we get without using transitions. Any value greater than 0 slows the transition from the immediate.

transition-timing-function

The timing function describes how the intermediate values during the transition are calculated and allows for the transition to change speed over its duration.

The effects of the timing function are commonly called easing functions.

It’s probably the most complicated part of transitions, though it’s still just as easy to work with. It’ll take me longer to explain than for you to start using.

The timing function is specified using a cubic bezier curve, which you can see in the image above. There are 4 points on the curve (P0, P1, P2, and P3). Point P0 is always located at coordinates (0,0) and point P3 is always at (1,1). Points P1 and P2 are what the timing function changes

The transition-timing-function has 6 values:

ease (default) — equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear — equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in — equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out — equivalent to cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out — equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier — user defined

With the cubic-bezier value you set 4 numbers between 0 and 1, which correspond to the x and y values (x1, y1, x2, y2) of points P1 and P2 of the curve.

 nav a {   transition-timing-function: linear;   transition-timing-function: bezier-curve(0.2, 0.4, 0.8, 0.7); }

For shorter durations the values won’t show much difference and ease or linear will probably suffice. The longer the duration, the greater the difference in the values.

You can read up on the math of bezier curves or you can just play around to see how they work. The latter will be a bit easier.

transition-delay

As you can probably guess the transition-delay property defines when the transition will start. As with duration it accepts a time as it’s value.

The default is 0, which means the transition will begin instantly, though it will still end as defined by the transition-duration.

 nav a {   transition-delay: 0.2s; }

The above delays the start of the transition for 2 ⁄ 10 of a second.

A negative value can be used and means the transition will start immediately, but will begin part way through the transition as if it had started before the action occurred.

transition shorthand

As with most things css there’s a transition shorthand for the 4 properties above.

nav a {
transition-property | transition-duration | transition-timing-function | transition-delay, [transition-property | transition-duration | transition-timing-function | transition-delay];
}

 nav a {   transition: background 0.5s ease 0.2s; }

The order is important. The first time value will be applied to duration and second will be applied to delay.

Starting and Reversing a Transition

In general when a transition starts it must complete according to the transition properties set even if those properties are changed by another action. However at times it doesn’t make sense to do this.

A common case is mousing over an element that starts a transition and then quickly mousing out. The rule above says the :hover transition has to complete before transitioning back to it’s initial value, however this doesn’t match expected behavior.

Expected behavior is that on mouse out the original transition stops and immediately moves in reverse. This is what the spec calls for.

You can read the technical explanation about how this is accomplished, but the gist is that whatever part of the transition has happened up to the point where the mouse-out occurred now happens in reverse.

You don’t have to do anything to make this happen either. It’s all automatic.

Properties that can be Transitioned

Quite a few properties can be transitioned from backgrounds and borders to positioning and z-index and all things in between. There’s a complete list in the spec.

Suffice it to say you shouldn’t find yourself lacking for different properties you can transition.

Transition Events

What triggers a transition? Anything that changes. While most examples will show transitions on hover there are more events you can apply them to.

If an element’s style can be triggered to change in any way that change can be transitioned. Some examples:

:hover
:focus
:active
:checked
:disabled
media queries

If you haven’t seen it yet check the latest incarnation of CSS Tricks for an example of the last. As you resize your browser the search box will move to a new location with a transition applied.

One thing you might have wondered while reading this post is why the transition is set on the default state instead of the changed state. Wouldn’t it make sense to define the transition on the hover for example instead of the default link?

The multiple states for which a transition can occur is why the transition property is set on the default state of the element. Imagine having to set a new set of transition properties on each possible triggering state. Much easier to set it once.

Browser Support

I mentioned at the start that browser support is good and bad in the usual suspects. Webkit introduced transition and so they work in both Safari and Chrome. Firefox has supported them since version 4.0 and Opera support began in version 10.5.

Transitions are coming to Internet Explorer in version 10, though we know that means it’ll be awhile before all IE users can see our wonderful transitions.

Again that’s ok since the transition shouldn’t be a critical element in your design. An IE user can see the same instant change they would see if transitions didn’t exist at all.

Do keep in mind that vendor prefixes are still needed for all transition properties in all browsers, including IE10.

 nav a {   -webkit-transition-property: all;   -moz-transition-property: all;   -o-transition-property: all;   -ms-transition-property: all;   transition-property: all; }

Collage of browser logos

Summary

CSS transitions are simple to work with and they’re a really nice effect to make changes on your site happen more naturally. Without them changes are instant, but that’s generally not how things work in real life.

Transitions are easy to set up. In fact most of what you’ll be doing is experimenting with different time settings to see if a change looks better occurring over a half second or a full second or some other time frame. You can get rather creative with a few small changes.

You need to use vendor prefixes for now, but browser support is good everywhere outside of IE and support is coming to IE. Since transitions will be non-critical to your design you can safely use them now even if IE users won’t see them yet.

Have you been using transitions in your work yet? Any tips to share for how and where to apply them?

Next week I want to look at another set of properties we can use for non-critical elements in our designs, namely 2D and 3D transforms, which will allow us to move, scale, rotate, and skew design elements.