Skip to main content

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.