CSS3 Transition Property Basics

In the second part in this series about CSS3 transitions, we’ll take a detailed look at the properties. But first, we need to know what can and cannot be animated…

Which CSS Properties Can Be Animated?

In general, a transition can be applied to any CSS property which has a discrete value which changes between the start and end states. Typically, this includes layout properties (width, height, padding, margins, borders), positional properties (left, right, top, bottom), transformations, font sizes, colors, background colors and opacities…

• width, e.g. 10em to 200px
• padding, e.g. 0px to 10px
• color, e.g. #F00 to #00F
• top, e.g. 0px to 300px
• border-radius, e.g. 10px to 3px
• transform, e.g. rotate(0deg) to rotate(90deg)

You can also apply transitions to color keywords such as maroon, fuchsia and teal since these are effectively translated to RGB values.

Which CSS Properties CANNOT Be Animated?

Here’s where it can get a little tricky. If you’re like me, the first transition you tried was something like this:

#container p
{
	display: none;
	transition: all 3s ease;
}

#container:hover p
{
	display: block;
}

Rather than nicely fading the element in, you’ll see an abrupt transition like you did in CSS2.1. The reason: it’s impossible to for the browser to determine the in-between states. display:none; removes a block from the page as if it were never there. A block cannot be partially displayed; it’s either there or it’s not. The same is true for visibility; you can’t expect a block to be half hidden which, by definition, would be visible! Fortunately, you can use opacity for fading effects instead. The next issue: you cannot rely on the ‘auto’ dimension, e.g.

#container p
{
	height: 0px;
	transition: all 3s ease;
}

#container:hover p
{
	height: auto;
}

‘auto’ is not a discrete dimension so the browser cannot calculate points between zero and an indeterminate value. However, there is a clever work-around; use max-height and set it to a value greater than the real height of the box. Similarly, you cannot switch properties to ‘auto’ to handle movement. This example would also fail:

#container p
{
	left: 0px;
	right: auto;
	transition: all 3s ease;
}

#container:hover p
{
	left: auto;
	right: 0px;
}

Finally, don’t expect a background-image to magically morph from one photo to another. There’s a possibility it’ll be implemented at a future date and some vendors have had limited success with CSS3 gradients, but it’s probably best avoided for now.

transition-property

The transition-property property declares which CSS properties will have a transition applied, e.g.

#container p.one
{
	transition-property: color;
}

#container p.two
{
	transition-property: width;
}

#container p.three
{
	transition-property: color, width;
}

If you’re happy for everything to change, use a value of all. You can also switch off transitions using a value of none.

transition-duration

transition-duration specifies an animation period in seconds (s) or milliseconds (ms) — one-thousandths of a second. The following durations are identical:

#container p.one
{
	transition-duration: 3s;
}

#container p.two
{
	transition-duration: 3000ms;
}

transition-timing-function

The transition-timing-function determines how the animation varies in speed throughout the duration. There are a number of possible values:

• ease — the default; the animation starts slowly then accelerates quickly. At the mid-point, it decelerates and slows to a stop.
• ease-in-out — similar to ease, but with subtler acceleration and deceleration.
• ease-in — starts slowly, but accelerates and stops abruptly.
• ease-out — starts quickly, but decelerates to a stop.
• linear — constant speed throughout the animation; often best used for color or opacity changes.

Finally, we have cubic-bezier which allows you to define your own weird and wonderful timing function. It’s a little complex so we’ll return to it in the next part of this series.

transition-delay

Finally, transition-delay specifies the period in seconds (s) or milliseconds (ms) before a transition will start. The following are identical:

#container p.one
{
	transition-delay: 0.5s;
}

#container p.two
{
	transition-delay: 500ms;
}

CSS Shorthand Notation

Let’s look at a full transition declaration:

#container p
{
	transition-property: all;
	transition-duration: 3s;
	transition-timing-function: ease-in-out;
	transition-delay: 0.5s;
}

And don’t forget you’ll also need the -webkit-prefixed equivalents. Fortunately, you can save your fingers and sanity using a single transition declaration which accepts the property, duration, timing-function and delay in that order, e.g.

#element
{
	/* starting state styles */
	color: #F00;
	-webkit-transition: all 3s ease-in-out 0.5s;
	transition: all 3s ease-in-out 0.5s;
}

#element:hover
{
	/* ending state styles */
	color: #00F;
}

View an example page using this transition…

Selecting a Selector

In all these examples I have defined the CSS transition within the standard (non-hovered) CSS selector. However, this will cascade to the :hover selector. In other words, it’s identical to:

#element, 
#element:hover
{
	/* starting and ending state styles */
	-webkit-transition: all 3s ease-in-out 0.5s;
	transition: all 3s ease-in-out 0.5s;
}

The same transition will therefore occur in both directions: start to end state and end to start state. In the next part of this series, we’ll examine the cubic-bezier transition timing function in more detail.

Frequently Asked Questions about CSS3 Transition Properties