transition-property and transition-duration

The transition shorthand is made of four properties. The first two are the ones you must understand.

transition-property

Which CSS property should animate. A name, a list, or all.

transition-duration

How long the change takes: 0.3s or 300ms.

1
2
3
4
5
6
7
8

<style>
  .box { width: 80px; height: 80px; background: #1a5276; margin: 8px 0; }
  .box:hover { width: 220px; background: #d94a00; }
  .slow { transition-property: width; transition-duration: 1.5s; }
  .fast { transition-property: width, background-color; transition-duration: 0.2s, 1s; }
</style>
<div class="box slow"></div>
<div class="box fast"></div>

Hover each box. The first only animates its width (and the color flips instantly). The second animates the width quickly and the color slowly. With two properties, you can give each its own duration.

The shorthand

1
2

transition: width 1.5s;
transition: width 0.2s, background-color 1s;

About “all”

transition: all 0.3s; animates everything that changes. It is convenient while learning but has downsides:

• It may animate things you did not intend.
• It can be heavy for the browser.

It is better to name the properties.

Which properties are cheap?

transform and opacity can be animated smoothly by the graphics card. Animating width, height, top or margin makes the browser re-layout the page on every frame, and can look jerky on slower devices.