Animation

Guidelines for building natural-feeling animations. Click the interactive examples to compare correct vs incorrect approaches.

Easing: Enter & Exit

Use ease-out for elements entering or exiting. The fast start feels responsive.

ease-inIncorrect
Edit
Duplicate
Delete

Starts slow, feels sluggish and unresponsive

ease-outCorrect
Edit
Duplicate
Delete

Starts fast, feels responsive and snappy

Easing: On-Screen Movement

Use ease-in-out for elements moving on screen. Mimics natural acceleration and deceleration.

ease-out

Decelerates only. Works, but less natural for on-screen movement.

ease-in-out

Accelerates then decelerates. Mimics natural motion like a car.

Duration

Keep UI animations under 300ms. Faster feels more connected to user actions.

400msIncorrect
Option 1
Option 2
Option 3

Feels disconnected from user action

180msCorrect
Option 1
Option 2
Option 3

Feels connected and responsive

Scale Starting Point

Don't animate from scale(0). Start from 0.95+ for a gentle, natural entrance.

scale(0)Incorrect
Modal

Appears from nothing. Feels unnatural and jarring.

scale(0.95)Correct
Modal

Gentle entrance. Like a balloon that's always visible.

Transform Origin

Set transform-origin to the trigger location. Popovers should scale from their source.

centerIncorrect
Profile
Settings
Logout

Scales from middle. Disconnected from trigger.

top leftCorrect
Profile
Settings
Logout

Scales from trigger. Feels connected and intentional.

Button Press Feedback

Add subtle scale-down on active state. Makes the UI feel alive and responsive.

No feedbackIncorrect

No visual response. Feels static and unresponsive.

Scale feedbackCorrect

Subtle scale on press. UI feels alive and listening.

Custom Easing Curves

Built-in CSS easings have weak acceleration. Use custom cubic-bezier curves.

Built-in ease-in-out

Weak acceleration. Feels soft and floaty.

Custom ease-in-out

Strong acceleration. Feels snappy and intentional.

Easing Reference

Recommended curves sorted by acceleration strength (quad → quint).

ease-out (enter/exit)

quadcubic-bezier(0.25, 0.46, 0.45, 0.94)
cubiccubic-bezier(0.215, 0.61, 0.355, 1)
quartcubic-bezier(0.165, 0.84, 0.44, 1)
quintcubic-bezier(0.23, 1, 0.32, 1)

ease-in-out (on-screen)

quadcubic-bezier(0.455, 0.03, 0.515, 0.955)
cubiccubic-bezier(0.645, 0.045, 0.355, 1)
quartcubic-bezier(0.77, 0, 0.175, 1)
quintcubic-bezier(0.86, 0, 0.07, 1)

Key Principles

  • Avoid ease-in — starts slow, makes UI feel sluggish
  • Never animate keyboard interactions — repeated actions should be instant
  • Prefer transform & opacity — GPU-accelerated, no layout thrashing
  • Use will-change sparingly — fixes shaky animations but consumes GPU memory