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.



There are four CSS properties that define a transition:

Property Name

What it does

Common Values


CSS property the transition applies to

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


Duration in seconds

.2s, 1s, 4s


Style of transition

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


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;