Transition Delay

Set the delay before a transition effect starts.

Widely available

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

Chrome
Edge
Firefox
Safari

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

Responsiveness

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

Target viewport sizes with breakpoint prefixes.

sm:td-(value)
Small≥640px
md:td-(value)
Medium≥768px
lg:td-(value)
Large≥1024px
xxl:td-(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:td-(value)

Negative Values

Use negative variants to apply negative transition delay values.

Use the -- syntax to apply negative numeric values.

Syntax:td--(value)