CSS3 Transitions 101: What are Transitions?

Transitions are the most-used type of CSS3 animation. Despite widespread adoption and a relatively simple syntax, there are several gotchas and options of which even the most knowledgeable developers are blissfully unaware!

This is the first in a four-part series about CSS3 transitions but each article can be read individually or out of order. Let’s start with the basics…

Animation == Behavior == JavaScript?

One of the arguments against CSS3 transitions is that it’s behavioral and trespasses on JavaScript territory. That’s absolutely true … but CSS has been doing it for many, many years.

When I started web development in the mid 1990s, neither CSS or JavaScript existed. One of my first projects was to implement a mouse-over hover effect for some icons — using Java in a pre-compiled applet. It was several days effort.

Within a year, JavaScript made hover-over effects immeasurably easier and every developer littered their HTML with inline handers such as onmouseover="changeColor();" onmouseout="changeColorBack();".

Shortly after that, CSS introduced dynamic pseudo-classes such as :hover, :active and :focus. We could separate stylesheets from our HTML and implement basic effects within seconds. Would you really want to return to the JavaScript days?

CSS3 Transitions build on existing CSS techniques. They don’t offer the frame-by-frame control available to JavaScript but you rarely need fine-grained animations for simple page widgets such as pop-ups and menus. While I admit to some initial skepticism, the CSS3 animation genie is out of the bottle and you’ll never put it back in.

The Benefits of CSS3

While there are still cases for JavaScript animation, you should normally use CSS3 when you can:

1. CSS3 transitions are natively handled by the browser. They will always be faster than a comparable JavaScript animation.
2. JavaScript animation is undoubtedly more difficult. Consider the mathematical complexities of implementing natural-looking acceleration and deceleration — even if you know the equations, you’ll require several lines of code and some rigorous testing. In CSS3 it can be handled with one property.
3. Some effects would be impractical in JavaScript alone, e.g. rotating an element in two or three dimensions.

So What is a Transition?

A transition is the simplest form of CSS3 animation; it defines an effect which is triggered between two states.

States
A transition requires a starting point (the initial state) and an ending point (the active state). For example, we could have an element which starts absolutely positioned at 0px and is colored blue and ends at 100px and is colored red. A CSS3 transition could smoothly animate between those two states without you needing to define the individual frames.

Triggers
The transition must be triggered in some way to start the animated effect which ultimately reaches the end state. This can be done in CSS alone using a pseudo selectors such as :hover or :focus. You could also trigger the animation by changing one or more of the element’s style properties in JavaScript.

CSS2.1 Transition Example

Let’s look at a very simple effect we can create in CSS2.1:
View the CSS2.1 demonstration page…

Hover over the white block and the child element will move.

Our HTML has a container block and a paragraph element:

<div id="container">
	<p>I will be animated</p>
</div>

The container has a few styles and is relatively positioned:

#container
{
	position: relative;
	width: 600px;
	height: 400px;
	background-color: #fff;
	border: 2px solid #000;
	margin: 1em auto;
}

The paragraph is sized and positioned at the top left of the container:

#container p
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100px;
	height: 70px;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	padding-top: 30px;
	background-color: #00c;
}

When we hover over the container, the paragraph is moved to the bottom right and has its color and border-radius altered:

#container:hover p
{
	left: 500px;
	top: 300px;
	background-color: #c00;
	border-radius: 50px;
}

Easy … and few developers would argue it should be handled using JavaScript!

CSS3 Transition Example

The demonstration above works well but the state transition is very abrupt. Let’s apply a little CSS3 magic…
View the CSS3 demonstration page…

Hover over the white block and you’ll see the same transition except that it’ll smoothly animate between the two states. Most would agree that it’s a far more pleasing effect. Let’s example the CSS3 code applied to the #container p selector which implements the animation:

transition: all 3s ease;

Seriously, that’s it. Twenty-five characters. Notice also that you can move the cursor off the container mid-animation and everything returns nicely. How long would it take to code a similar effect in JavaScript?

Admittedly, I also added a sneaky transform: rotate(360deg); to the :hover state which you’ll see in Firefox or IE10 — but we’ve hardly broken the project budget!

Cross-Browser Transition Support

Transitions are supported in Firefox, IE10 and Opera 12 without a prefix.

At the time of writing, the Webkit browsers including Chrome, Safari and Opera 15+ require the -webkit- prefix which should be added prior to the standard property, e.g.

-webkit-transition: all 3s ease;
transition: all 3s ease;

Unfortunately, not all browsers are created equally. Animations can get a little freaky in Opera 12. In addition, the Webkit engine vomits when it encounters the rotate transformation and gives up on some other transition effects (hence the reason for not including a -webkit-transform: rotate(360deg);). Finally, IE9 and below will fail to show any animation.

However, this rarely matters. If CSS3 transitions fail or don’t work as you expected, the start and end states will eventually be reached. In most cases, the browser will fall-back to the instant CSS2.1-like state switch.

In the next part we’ll look at the transition property in more detail and discuss what can and cannot be animated.