Motion
Motion sets the curve and the duration of each change on screen, and what stays still when users request reduced motion.
Summit animates with Tailwind v4’s transition utilities and the keyframes of tw-animate-css.
Curves
tokens.css declares two curves. A transition-* class with no ease-* class uses --ease-out, and so do animate-in and animate-out.
| Variable | Value | Purpose |
|---|---|---|
--ease-out | cubic-bezier(0.23, 1, 0.32, 1) | A transition, an animate-in, or an animate-out with no curve of its own |
--ease-in-out | cubic-bezier(0.77, 0, 0.175, 1) | The ease-in-out class |
A Sheet and a Drawer slide on a curve of their own, cubic-bezier(0.32, 0.72, 0, 1). See Theming for what else tokens.css declares.
Durations
A change of color lasts 150ms, Tailwind’s default. A larger surface has a longer duration, and a popup exits faster than it enters.
| Change | Duration |
|---|---|
| The fill, border, or text color of a control, the scale of a pressed Button, and the thumb of a Switch | 150ms |
| The focus outline, and the highlighted row of a Table, a menu, or the Item component | None |
| The tick of a Checkbox | 100ms in and 50ms out |
| A Tooltip | 125ms in and 100ms out |
| A Popover, a Hover Card, a menu, a Select, or a Combobox | 150ms in and 100ms out |
| A Dialog or an Alert Dialog | 200ms in and 150ms out |
| A Sheet | 200ms |
| A Drawer | 450ms in. Out, 400ms times the strength of the swipe, which Base UI sets from 0.1 to 1. |
| The panel of an Accordion or a Collapsible | 200ms |
| The indicator of Tabs or a Segmented Control | 200ms |
| A Spinner | 750ms a turn |
| A Skeleton | 2s a pulse |
TooltipProvider delays the first Tooltip by 200ms. While one is open, the next opens with no delay and no transition. A Loading Button waits 150ms before it shows its Spinner.
Open each overlay to watch it enter and exit.
Rules
The components already follow these rules. Apply them when you override a class or build a part outside the registry.
Popup Origin
Scale a popup from its trigger. A popup grows from 95% of its size and fades in. origin-(--transform-origin) sets the origin of the scale to the side that faces the trigger, so the popup appears to come from the control that opened it. A Dialog has no trigger next to it, so it grows from 97% at its own center.
Transition Properties
Use transition-[opacity,scale] or transition-colors, not transition-all. transition-all also animates a height, a padding, or an outline that was never meant to move.
Size Changes
Avoid animating a size that moves other content. A width or a height that changes over time pushes its neighbors on every frame. The Sidebar collapses, the Drawer changes height, and the Navigation Menu resizes with no transition. A Progress bar fills with a scale transform. The panel of an Accordion or a Collapsible is the exception: it animates height and opacity over 200ms.
Focus and Highlights
Show focus and highlights immediately. The focus outline has no transition, so keyboard users see it the moment a control receives focus. The highlighted row of a Table, a menu, and the Item component changes fill with no fade, so the highlight never trails the pointer or the arrow keys. The command palette opens and closes with no animation because users open it from the keyboard many times a day.
Accessibility
When users request reduced motion, one rule in tokens.css, under prefers-reduced-motion: reduce, limits every transition to color, opacity, shadow, and filter. Position, scale, and size then change immediately, and fades stay.
| Motion | Reduced Motion |
|---|---|
| The scale of a popup or a Dialog | It opens at full size and fades |
| The slide of a Sheet | It fades in place |
| The slide of a Drawer | It is in place immediately |
| The slide of a Tabs or Segmented Control indicator, and of a Switch thumb | It jumps to its place |
| The height of an Accordion or a Collapsible panel | It opens immediately, and its content fades |
| The scale of a pressed Button | It changes immediately |
| The pulse of an indeterminate Progress bar | It stops |
| Smooth scrolling | The page jumps |
| A Spinner and a Skeleton | They keep moving |
See Accessibility for the two criteria that apply to motion.
In Code
These are the motion classes of a Popover. Base UI marks a part with data-starting-style on its first frame and data-ending-style on its last frame.
<PopoverPrimitive.Popup className="origin-(--transform-origin) transition-[opacity,scale] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-100 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:data-ending-style:scale-100 motion-reduce:data-starting-style:scale-100" />