07

Motion

Every motion gives feedback or guides attention. Nothing decorative. Confident, not playful.

TIMING

150ms

Micro

300ms

Transition

600ms

Entrance

150ms

Micro

Hover, press, toggle, focus ring

300ms

Transition

Expand, collapse, tab switch, slide

600ms

Entrance

Page reveal, modal open, scroll content

EASING

ease-out

Entrances

Decelerates into rest. Feels like arriving.

ease-in-out

State changes

Smooth both ways. Feels like transforming.

cubic-bezier(0.4, 0, 0.2, 1)

Sliding

Material ease. Feels like gliding.

RULES

DO

  • Keep micro-interactions under 200ms
  • Stagger list items by 60–100ms
  • Use transform and opacity only — GPU-accelerated
  • Match animation to intent — press should feel instant
  • Load content behind skeletons, not spinners

DON'T

  • Animate width, height, top, left — triggers layout
  • Use bounce or spring — ZRO is confident, not cute
  • Use linear easing — feels mechanical
  • Block interaction during 300ms+ animations
  • Add motion for decoration — every animation earns its place

REFERENCE

CLASS

DURATION

USE FOR

.animate-fade-up

600ms

Section reveals, page load content

.animate-scale-in

400ms

Modals, dialogs, popovers

.animate-slide-in-right

500ms

Toasts, side panels

.animate-fade-in

600ms

Content after skeleton

.animate-pulse-gentle

2s ∞

Processing, pending states

.animate-shimmer

2s ∞

Skeleton loading screens

.hover-lift

200ms

Clickable cards, interactive tiles

.hover-glow

200ms

Border accent bloom on hover

.active:scale-[0.97]

150ms

Button and element press

.skeleton

1.5s ∞

Content placeholder blocks