Transition Duration

Set the amount of time a transition takes to complete.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

tdu-0
transition-duration: 0;
tdu-50
transition-duration: 50ms;
tdu-100
transition-duration: 100ms;
tdu-150
transition-duration: 150ms;
tdu-200
transition-duration: 200ms;
tdu-250
transition-duration: 250ms;
tdu-300
transition-duration: 300ms;
tdu-350
transition-duration: 350ms;
tdu-400
transition-duration: 400ms;
tdu-450
transition-duration: 450ms;
tdu-500
transition-duration: 500ms;
tdu-550
transition-duration: 550ms;
tdu-600
transition-duration: 600ms;
tdu-650
transition-duration: 650ms;
tdu-700
transition-duration: 700ms;
tdu-750
transition-duration: 750ms;
tdu-800
transition-duration: 800ms;
tdu-850
transition-duration: 850ms;
tdu-900
transition-duration: 900ms;
tdu-950
transition-duration: 950ms;
tdu-1000
transition-duration: 1000ms;

Media Queries

Prefix a class with a breakpoint to apply it from that width up.

Pseudo Classes

Prefix a class with a state to apply it only while that state matches.