Transition only the needed properties

Animate background and transform without using transition: all.

Official sourceW3C CSS Transitions — transition shorthandReviewed: 2026-08-26

STEP 1 · LEARN

How it works

The transition shorthand can define property, duration and timing function for each transition. Listing properties limits browser work and avoids accidentally animating other changes.

Correct example

.action { transition: background-color 180ms ease, transform 180ms ease; }

Only background and transform respond gradually over 180ms.

Common mistake

.action { transition: all 180ms ease; }

all can include unintended properties and obscures exactly what is animated.

STEP 2 · APPLY

Your exercise

Set transition for background-color and transform, each with 180ms ease.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The transition lists background and transform.
The target element is present in the page.

Explain the solution logic

The comma-separated list creates two independent transitions and includes no other properties.

How it works

Your exercise

Write and see the result

What needs to pass