CSS3 Transition Property Basics

This entry is part 3 of 4 in the series CSS3 Transitions

CSS3 Transitions

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.

CSS3 Transitions

<< CSS3 Transitions: Bezier Timing FunctionsAdvanced CSS3 Transition Effects >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.originitsolution.com Delhi Designer

    This transition effect used in this post is very useful for my next ongoing project. I was looking for some simple steps than this post is really did.

    Thanks for you post.

  • Nick

    I wish you did not use a hover for your example. I read site point on my iPad :(

    • http://www.optimalworks.net/ Craig Buckler

      It should still work — try tapping the element. I don’t own an iPad, but it certainly works on Android phones and tablets (stock browser and Chrome).

      • Nick

        Yeah I tried that too, but still didn’t work. Very interesting. I wonder why it wouldn’t be working but CSS drop down menus do.

      • http://www.optimalworks.net/ Craig Buckler

        If you have a relatively old tablet, it’s possible the version of Safari it’s using doesn’t support transitions or fails when transformations are applied?

      • Nick

        iPad mini that was purchased maybe 3 months ago.

        I am actually becoming very interested in finding out why this doesn’t work. Check this page out that I found:

        http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

        There are 10 different effects here but the only ones that work for me are 3,4,5,8, and 9.

        Maybe some of the properties are just not fully supported on mobile safari?

      • http://www.optimalworks.net/ Craig Buckler

        Odd. I have discovered Webkit doing some quirky stuff like abandoning all transition effects because it doesn’t like a particular combination or thinks something will be too tricky.

        My only other thought: have you tried switching it off and on again?!!

      • Nick

        Well I didn’t even think to try the #1 IT rule, but I just tried it with much hope ( and a possible face palm ) and it was still a no go.

      • http://www.optimalworks.net/ Craig Buckler

        Ahh well, it was a long-shot.

        I therefore suspect Safari barfs at particular combinations of transitions and transformations. It’s not just Safari either — webkit may have been the first engine to support CSS3 animations but it’s falling behind the others. You’ll see another quirky example in a post coming soon on SitePoint.

      • Nick

        Cool I look forward to it. This little quirk has defimitely got me more interested in this subject. Especially the cross browser compatibility with it.

        Thanks for all your work here.