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;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:tdu-(value)
Small≥640px
md:tdu-(value)
Medium≥768px
lg:tdu-(value)
Large≥1024px
xxl:tdu-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:tdu-(value)

Negative Values

Use negative variants to apply negative transition duration values.

Use the -- syntax to apply negative numeric values.

Syntax:tdu--(value)