While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification.

With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

There is only one problem: many of us have never created animations in JavaScript, Flash or some other environment before, and are therefore not as well-versed in the unwritten rules of the animation world.

Before We Go On

A key distinction must be made clear: CSS Transitions govern the specific purpose of transitioning a state change, say from A to B. They can apply to one or more elements at a time, but it’s important to remember that they don’t animate anything unless there is a change.

CSS Animations, on the other hand, are for the purpose of creating dynamic, keyframe-based animations that can run on their own, regardless of any user input or state changes.

This article focuses solely on CSS Transitions, though the lessons learned often apply to CSS Animations as well.

You Might Need to Switch Browser

To see the examples in this article in action, you’ll have to use a browser that supports CSS Transitions: Safari as of 3.1.2, Chrome, Firefox 3.7 alpha or Opera 10.5x.

When and Where Should I use Transitions?

Just because a tool is available to you, doesn’t mean you have to use it. This is as true for transitions and animations as it is for anything else, if not more so. Three simple questions you can ask yourself will help you decide:

• Does this transition add any value?
• Does this transition enhance the user experience?
• Does this transition avoid distracting the user from the task they are trying to accomplish?

If your answer is “No” to any of these questions, you should re-evaluate your transition; you might be better off without it.

How a transition adds value is often difficult to determine; a lot of animation on the Web is superfluous, serving no real purpose. But animations can serve a purpose, like guiding the user’s eyes to something that changed on the page.

Another purpose of a transition can be to make something more fun and engaging, encouraging its use. This may sound superfluous to some, but there is real value in making a website or interface more fun.

Making transitions that enhance the user experience can be tricky, too. Oftentimes, this comes down to the specifics of the transition: how long it takes, what aspects (read: CSS properties) it transitions, and whether they make the guided interaction clearer or more confusing.

Lastly, if the transition or animation distracts the user, it can actually harm the interface overall. For instance, if something animates when the user is trying to read something, their reading experience will greatly suffer. Let’s look at some examples to illustrate all this.

Examples

The first example shows a background color transition taking place when the user hovers over the blockquote element.

(Note: the CSS rules listed in each example only display the most relevant properties, and for the sake of brevity the vendor-prefixed versions are omitted after Example 1. Look at the examples.css source file for the full CSS of each example)

#example-1 .example-area blockquote {
  background: #eee;
  ⋮

  transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}
#example-1 .example-area blockquote:hover {
  background: #aaa;
}

Now, you may wonder why anyone would do this when it clearly serves no purpose other than displaying the author’s ability to use CSS Transitions—worse, it triggers on an element that has no inherent interactivity associated to it!

And yet, examples like these can be found all over the web, be it a meaningless background color change, a drop shadow or something else. Furthermore, if there is no interactivity to a specific element, there almost certainly shouldn’t be any transition applied to it unless triggered by an interactive element.

Because the human eye is trained (via millions of years of evolution) to spot movement faster than it observes details in a static view, any kind of movement that occurs in or even around a body of text will immediately distract the reader from the reading process.

It is therefore crucial that you think deeply about any transitions or even animations you apply to your web page, and ensure that they both serve a purpose and don’t distract your visitors from what they’re doing.

Duration

The next examples look at a very important aspect of transitions: duration. As the human eye sees movement at different speeds depending on light, color and information, it’s impossible to give any specific guidance on what makes for a snappy, comfortable animation.

However, it is possible to get a better feel for it by looking at some examples and determining which ones “feel” more intuitive and fluid to you, especially after repeated use.

We’ll start with four simple boxes that animate once you hover over them (or select them via keyboard focus):

#example-2 .item {
  background: #ccc;
  height: 30px;
  ⋮
}
.example-area .item {
  transition: all 1s linear;
  ⋮
}
.example-area .item-2 {
  transition-duration: .75s;
  ⋮
}
.example-area .item-3 {
  transition-duration: .5s;
  ⋮
}
.example-area .item-4 {
  transition-duration: .25s;
  ⋮
}
#example-2 .item:hover,
#example-2 .item:focus {
  height: 200px;
}

If you start hovering from left to right and then back again, one by one, you’ll probably get pretty impatient by the time you reach the 1-second box on the left again. This seems contradictory to our minds; after all, it’s only a second, right? Except that a second is a pretty long time when it comes to smooth transitions or snappy animations.

Example 2 used relatively big objects to illustrate the speed of transitions; let’s see what these exact same transition durations feel like when used in a less obvious manner, such as hyperlinks in a body of text:

#example-3 .item,
#example-3 .item {
  background: #fffef7;
  ⋮
}
#example-3 .item:hover,
#example-3 .item:focus {
  background: rgb(235, 111, 0);
  color: #fff;
}

Suddenly, these very same transition speeds feel a lot slower—despite being the exact same. The reason for that is that the difference between the two states is smaller in example 3 for each element, than it is per element in example 2.

There is thus a correlation between the perceived difference between state A and B, and the time taken by the transition.

When adding transitions to your interactive elements, it’s a good idea to try them out repeatedly for a while to determine whether they start to feel “slow”. Even a half-second transition can quickly become a tedious wait time for a user, especially since they’re probably pretty used to instantaneous state changes—which, it should be noted, are not necessarily better, because they don’t guide the user to see what just changed.

If you’re doing color transitions in some way or another, you may observe strange hues from appearing in the middle of your transition. That happens when you have no start or end color specified. Example 4 has four boxes to display this:

#example-4 .item {
  height: 75px;
  width: 75px;
  transition: background-color .5s linear;
  ⋮
}
#example-4 .item-1 { background: transparent; }
#example-4 .item-2 { background: #fffef7; }
#example-4 .item-3 { background: #fffef7; }
#example-4 .item-4 { background: rgba(255, 254, 247, 0); }

#example-4 .item:hover,
#example-4 .item:focus {
  background-color: rgb(235, 111, 0);
  background-color: rgba(235, 111, 0, 1);
}

The first box has no predetermined background color, and therefore has a weird gray showing up in the transition. The second box does and so its background color fades more naturally.

However, as you can see in the third box’s case, having a solid background color may not work as you want it to with textured backgrounds, which is why the fourth box uses an rgba value—that is, a color with an alpha channel specified—to make it appear natural and support textured backgrounds.

Conclusion

By now you should have a better understanding of when and where to use CSS Transitions, and what it takes to optimize them so that they serve to enhance the overall user experience.

There are countless of possible combinations for transitions on the web, and each unique one will require a different process to fine-tune it. That said, there is a lot of potential to this new addition to CSS, so go out there and wield it to make something beautiful.

from Think Vitamin