Asymmetric timing: enter can be slightly slower; exit should be fast.
Use @starting-style for DOM entry animations; fall back to data-mounted.
A small filter: blur(2px) can hide rough crossfades.
Motion design principles
Continuity over teleportation. Elements visible in both states transition in place. Never duplicate a persistent element or hard-cut between views that share components.
Directional motion matches position. Tab and carousel transitions animate in the direction matching spatial layout (left-to-right for forward, right-to-left for back).
Emerge from the trigger. Overlays, trays, and panels animate outward from the element that opened them. Generic centre-screen entrances break spatial orientation.
Consistent polish everywhere. Under-animated areas make the entire product feel unpolished. Motion quality must be uniform across all surfaces.
Delight scales inversely with frequency. Rarer interactions have more room for personality and surprise. High-frequency actions must be invisible.
Motion enhances perceived speed. Smooth transitions between states feel faster than hard cuts, even at identical load times.
What to animate
Movement: transform and opacity only.
State feedback: color, background-color, and opacity are acceptable.
Never animate layout properties (width, height, top, left); never use transition: all.
Avoid filter animation for core interactions; keep blur <= 20px if unavoidable.
Easing defaults
Element
Duration
Easing
Button press feedback
100–160ms
cubic-bezier(0.22, 1, 0.36, 1)
Tooltips, small popovers
125–200ms
ease-out or enter curve
Dropdowns, selects
150–250ms
cubic-bezier(0.22, 1, 0.36, 1)
Modals, drawers
200–350ms
cubic-bezier(0.22, 1, 0.36, 1)
Move/slide on screen
200–300ms
cubic-bezier(0.25, 1, 0.5, 1)
Named curves
Enter:cubic-bezier(0.22, 1, 0.36, 1) — entrances and transform-based hover
Avoid ease-in for UI. Prefer custom curves from easing.dev.
Spatial and sequencing
Set transform-origin at the trigger point for popovers; keep center for modals.
For dialogs/menus, start around scale(0.85–0.9). Never scale(0).
Stagger reveals at 30–50ms per item; total stagger under 300ms.
Accessibility
Gate hover animations behind @media (hover: hover) and (pointer: fine) to avoid false positives on touch.
During direct manipulation, keep the element locked to the pointer. Add easing only after release.
Performance
Only animate transform and opacity — these skip layout and paint.
Pause looping animations off-screen with IntersectionObserver.
Toggle will-change only during heavy motion and only for transform/opacity — remove after.
Do not animate drag gestures using CSS variables (triggers recalc on all children).
Motion x/y values are the normal choice for axis-based movement and drag. Use full transform strings when you need one transform owner for combined transforms or interop.
Hard stops on drag boundaries — use friction/damping instead.
Mixing Motion x/y props with a handwritten transform string on the same element.
Keyframes on rapidly-triggered elements — use CSS transitions for interruptibility.
Static cuts between related views — if views share elements, hard cuts lose spatial context. Transition shared elements in place.
Duplicating persistent elements across states — animate the same element from its current position to its next, rather than hiding one and showing another.
Generic centre-screen entrance for contextual content — overlays and trays should emerge from their trigger, not fade in from nowhere.
