Transitions and Transforms

Introduction

When you hover over a button and its colour jumps instantly, it feels abrupt. When it fades smoothly, it feels polished. Transitions smooth out changes. Transforms move and reshape elements without disturbing the layout around them.

Transitions

A transition tells the browser: "When this property changes, do not jump. Animate it over a short time."

The transition shorthand is: property, duration, timing function, delay. Put it on the element's normal state, not only on :hover, so it animates both in and out.

• ease, ease-in, ease-out and linear are common timing functions.
• Use transition: all 0.3s only while experimenting. Naming exact properties is cleaner and faster.

Transforms

transform changes how an element is drawn without moving other elements.

• translate(x, y) moves it.
• scale(n) makes it bigger or smaller.
• rotate(angle) turns it.

You can combine transforms by listing them one after another.

Why transform and opacity are special

Browsers can animate transform and opacity very smoothly because they do not force the page layout to be recalculated. Animating width, height, top or margin can feel jerky. When you have a choice, animate transform and opacity.

Respect reduced motion

Some people feel unwell from motion on screens. They can turn on a "reduce motion" setting, and CSS can detect it:

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

Honouring this setting is an easy way to make your site kinder.

Try it yourself

Add a rotate(6deg) to the hover transform, and change the timing to 0.5s.

Summary

• transition animates a change over time: property, duration, timing, delay.
• transform moves, scales or rotates without disturbing layout.
• Prefer animating transform and opacity.
• Respect prefers-reduced-motion.