An introduction to CSS Transitions

We often find cool new experiments that show how far you can go with pure CSS. There's some impressive stuff, like this iPhone, this solar system, or this 3D version of a Velazquez painting. This article is not about that. It's about simple CSS3 effects that you should already be using to enhance your work. They improve the experience for users with modern broswers, and don't affect thouse without them.

CSS Transitions

What are they?

With older versions of CSS, whenever something changed, it did so immediately. With CSS Transitions you can make some changes occur smoothly over a period of time.

Examples

Syntaxis

There are four CSS properties that define a transition:

Property Name

What it does

Common Values

transition-property

CSS property the transition applies to

all, background-color, background-position, color, height, width

transition-duration

Duration in seconds

.2s, 1s, 4s

transition-timing-function

Style of transition

linear, ease, ease-in, ease-out, e ase-in-out

transition-delay

Delay before the transition starts

.2s, 1s, 4s

Changing the color of a link on hover looks like this:

a:hover {
  color: red;
  transition-property: color;
  transition-duration: .5s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

Or, in short-hand:

a:hover {
  color: red;
  transition: color .5s linear 0s;
}

Since the standard is still in development, you should actually use the vendor-specific prefixes.

a:hover {
  color: red;
  -ms-transition: color .5s linear 0s;
  -moz-transition: color .5s linear 0s;
  -o-transition: color .5s linear 0s;
  -webkit-transition: color .5s linear 0s;
  transition: color .5s linear 0s;
}