CSS3 Transitions – Simple Transition Animations

This will help you animate property changes.

It may sound complicated but just imagine this situation:

.box {
  background: green;
}

.box:hover {
  background: blue;
}

Not a big deal. Now imagine you want to animate a color change on mouse hover. That is what transitions are for. They animate property changes.

.box {
  background: green;
  transition: 300ms;
}

.box:hover {
  background: blue;
}

CSS transitions are usually triggered on mouse hover but you can also trigger them by adding a class using Javascript and enabling clicking on the element: .box.clicked { background: blue; }.

Try an example at cdpn.io/e/hJljB.

In Practice

This way, we can animate almost any CSS property including positioning or transformation.

You can actually have a lot of fun using transitions. You can animate borders or create wild hover animations.

However, this is not a fully-fledged animation tool. If you want to have the progress of the animation completely under control, take a look at CSS3 animations.

But that does not mean you can’t steal the show using transitions. Just read on.

Syntax

transition:
  (_transition_property_)
  _transition_duration_
  (_transition_timing_function_)
  (_transition_delay_)
  (, _additional_transition_);

Transition Duration

This is the only required value in the transition shorthand, defined in seconds or milliseconds. A separate declaration looks like this: transition-duration: 0s.

Transition Properties

Not all element properties can be animated, leaving the rest without animation. A separate declaration would look like this: transition-property: none. Example:

.box {
  background: green;
  transition: margin 300ms;
}

.box:hover {
  background: blue;
  margin-left: 200px;
}

As mentioned before, animated transitions cannot be applied to all CSS properties. For instance, animating the display property would be absolutely useless. So here is a list of animatable properties.

Transition Timing Function

A separate declaration would look like this: transition-timing-function: ease. You can choose from preset values or you can define your own.

Transition Delay

A transition can be delayed, causing the property change to be executed at a specified time after the request. A separate declaration would look like this: transition-delay: 0s.

Multiple Animations

If you are changing multiple properties, you do not have to animate them all at once. You can easily combine them, opening up new dimensions in animation possibilities.

Both transitions in the following example last 200 milliseconds. However, the second one, which animates the background-color property is executed one second after the first one has ended:

transition: transform 200ms,
  background-color 200ms 1s;

Take a look at the example at cdpn.io/e/vIGAk.

Browser Support

IE10+. If you use CSS transition for eye-candy effects (not as a function), you can pull it off much more easily than by using Javascript, plus no one will miss it in older browsers.

On the other hand, if you are creating a functional animation (e.g. a progress bar), make a fallback solution for older browsers using feature detection.