Motion

Motion in CSS comes in three kinds, and Tailwind has a small set of classes for each. A transition smooths a change between two states (hover, focus, a class being toggled). A transform moves, scales, rotates or skews an element without disturbing the layout around it. An animation runs on its own, from keyframes, with no state change needed. The last part of the chapter is the one that matters most for real users: some people ask their system to reduce motion, and Tailwind has two variants for respecting that.

Transitions

A transition needs two things: a property list (what is allowed to animate) and a duration. Tailwind's transition-* classes set the property list and, apart from transition-none, also set a default duration of 150ms and the easing cubic-bezier(0.4, 0, 0.2, 1). Measured from the computed style:

Duration, Delay and Easing

duration-300 is transition-duration: 300ms, and any whole number works (duration-[1s,15s] gives a separate time per property). delay-200 waits before starting. The easing classes come from theme variables: ease-in, ease-out and ease-in-out are the three curves, and ease-linear is linear. For a custom curve write it in brackets: ease-[cubic-bezier(.2,.8,.2,1)]. One measured example:

The in-between colour in the middle sample is the proof that the browser is blending, not jumping. Delay and duration work together: transition-opacity delay-200 duration-700 ease-in-out measured opacity, 0.2s delay, 0.7s duration.

Transitions are written on the element that changes, and the end state is whatever variant applies: hover:rotate-0 on an element that starts at -rotate-6 (with duration-1000) measured -4.80862deg at 100ms, then 0deg.

Transforms

In Tailwind v4 the transform utilities use the modern individual CSS properties, so they combine freely without one class overriding another, and each is transitioned separately. From the compiled output and the computed styles:

Two properties of transforms explain why they are preferred for motion. They do not change the element's place in the layout (its neighbours stay where they were), and browsers can animate them without recomputing the page layout. Add transition-transform (or plain transition) and a hover: variant and you have the standard lift, grow or slide effect. Variants combine: hover:-translate-y-0.5, md:rotate-0, group-hover:scale-105.

3D Transforms

Rotating around the X or Y axis needs depth, which in CSS comes from perspective on the parent (the distance from the viewer), and children only share a 3D space if transform-style: preserve-3d is set (transform-3d). The built-in perspectives are named distances; I read them from the compiled theme: perspective-midrange is 800px and perspective-distant is 1200px.

backface-hidden is what makes a "flip card" work: put the front and back faces back to back, each with backface-hidden, and rotate the card 180 degrees on the Y axis. The matrix above shows the 3D rotation is really being applied; I did not build a full flip card for this chapter.

Animations

The four built-in animations are classes that set animation: var(--animate-…); the theme variables hold the real shorthand. I measured each element's animation-name, duration, easing and loop count, and asked the browser how many animations it was running (getAnimations().length):

Each of the four ran (getAnimations().length was 1). The responsive form works as expected: animate-none md:animate-spin measured none at a 700px viewport and spin at 900px.

For your own animation, define it in @theme together with its keyframes (the technique from chapter 9: --animate-wiggle plus @keyframes wiggle) and use animate-wiggle. You can also write the shorthand in brackets, animate-[wiggle_1s_ease-in-out_infinite], and it reads the animation name and settings correctly (measured wiggle, 1s, ease-in-out, infinite) — but the bracket form only names the animation. On a test page that had no @keyframes wiggle anywhere, the browser reported 0 running animations. If an arbitrary animation does nothing, check that the keyframes exist.

Enter Animations with starting:

A transition needs a before and after, and a brand-new element has no "before". The starting: variant wraps its styles in CSS @starting-style, which supplies the first-frame values for an element's first render (or when it goes from display: none to visible). I compiled starting:opacity-0 and the output is exactly @starting-style { .starting\:opacity-0 { opacity: 0%; } }. Then I inserted an element into the running page with JavaScript and read its opacity:

The official docs show it on a popover: class="opacity-0 starting:open:opacity-0 …", combined with open:. I did not run that popover example; what I tested is the insertion case above. Because the default transition list includes display, and transition-discrete sets transition-behavior: allow-discrete (measured), the pieces for fading something in from hidden without JavaScript timers are in place; I did not test a display transition in this chapter. The docs' page for starting gives no browser-support notes, so check a support table before depending on it for something important.

will-change

will-change-transform, will-change-scroll (scroll-position), will-change-contents, will-change-auto, and the bracket form will-change-[top,left] (measured top, left) tell the browser in advance what is about to change so it can prepare. The official guidance is to use them as a last resort for a performance problem you have actually measured, not everywhere "just in case"; applied broadly they can make a page slower. If you need one, add it just before the change and go back to will-change-auto afterwards.

Respecting Reduced Motion

Some users get dizzy or sick from large movement and turn on "reduce motion" in their operating system. Browsers report this through prefers-reduced-motion, and Tailwind gives you the variants motion-safe: (no-preference) and motion-reduce: (reduce). I emulated the setting in Chrome and read the results:

The last two rows are two different design decisions. With motion-safe: in front of the effect itself, reduced-motion users never get the movement. With motion-reduce:transition-none, they get the end state instantly, which is usually what you want when the change carries information (an item that moved, a panel that opened). Decorative loops such as animate-pulse and animate-bounce are the strongest candidates for motion-safe:. The docs' own pairing is duration-300 motion-reduce:duration-0.

Hands-On Exercises