CSS Transitions

Tweak the shorthand, hover or toggle the target, and compare interpolable vs discrete properties — including transition-behavior: allow-discrete.

Transition Playground

A transition interpolates between two computed values when a property changes. Adjust the controls, then hover the stage or click Toggle state to see it run.

transition-property

timing-function

duration 600ms

delay 0ms

Generated transition shorthand

transition: all 600ms ease 0ms;

hover me

state A

What is animatable?

Interpolable properties blend smoothly; discrete properties like display snap at the 50% mark unless you opt into allow-discrete.

Interpolable

background-color

smooth blend

Continuous range — every frame is a mix of A and B.

Discrete

display: block ↔ none

snaps at 50%

No in-between — value flips halfway through duration.

allow-discrete + @starting-style

Modern browsers can fade display: none when you declare transition-behavior: allow-discrete and seed entry opacity with @starting-style.

Enable allow-discrete + @starting-style Classic (snap)

Small card — mount & unmount

Classic mode: opacity may fade, but display: none still snaps — the card vanishes abruptly. Enable the checkbox to see the discrete transition participate.