Motion

The transition durations and ease curves your project gets, as Tailwind v4 ships them.

Summary

Two families of motion utilities: duration-* sets how long a transition runs, and ease-* the curve it follows. A transition that names neither runs on one default for each.

Note

Inherited from Tailwind v4 defaults, not yet a pmndrs decision. See Tailwind's transition-duration docs.

Defaults

A transition-* utility (transition, transition-colors, transition-transform…) without a duration-* or an ease-* runs on these two theme variables:

VariableValue
--default-transition-duration150ms
--default-transition-timing-functioncubic-bezier(0.4, 0, 0.2, 1)

The default curve is the one ease-in-out sets.

Duration

duration-* sets transition-duration in milliseconds: duration-300 is 300ms. No theme variable stands behind it, so any number works, not only the steps below: duration-250 is 250ms. Use brackets for another unit (duration-[2s]).

UtilityValue
duration-00ms
duration-7575ms
duration-100100ms
duration-150150ms
duration-200200ms
duration-300300ms
duration-500500ms
duration-700700ms
duration-10001000ms

Hover the panel to run every step at once, on the default curve:

duration-0
duration-75
duration-100
duration-150
duration-200
duration-300
duration-500
duration-700
duration-1000

Easing

ease-* sets transition-timing-function, from the --ease-* theme variables. See Tailwind's transition-timing-function docs.

UtilityVariableValue
ease-linearnonelinear
ease-in--ease-incubic-bezier(0.4, 0, 1, 1)
ease-out--ease-outcubic-bezier(0, 0, 0.2, 1)
ease-in-out--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

ease-in starts slow, so it suits an element leaving the screen. ease-out ends slow, so it suits an element arriving. ease-in-out suits an element that moves from one place to another.

Hover the panel to run every curve at once, over duration-1000:

ease-linear
ease-in
ease-out
ease-in-out

Reduced motion

Prefix a utility with motion-reduce: to drop a transition for people who ask their system for less motion: motion-reduce:transition-none. The previews above do.

Edit this page