Material Design 3

Motion System

Comprehensive motion tokens including easing curves and duration presets for consistent, expressive animations across your application.

6 easing curves16 duration tokens

Quick Reference

Primary EasingEmphasized

Standard Duration300ms

Range50ms - 1000ms

Overview Colors Typography Spacing Shape Motion States Elevation Breakpoints Tokens Customization Content Design Glossary Components Symbols Patterns Inputs App Icons Materials System Localization Accessibility Platforms

M3 Motion Principles

Material Design 3 motion creates a unified, expressive feel:

Emphasized: Expressive motion for attention-grabbing transitions (primary enter/exit)
Standard: Utilitarian motion for common state changes
Decelerate: Elements entering the screen slow down at the end
Accelerate: Elements leaving the screen speed up at the end

Duration tokens are organized into categories: Short (50-200ms), Medium (250-400ms), Long (450-600ms), and Extra Long (700-1000ms).

Interactive Motion Comparison

Easing Curve Comparison

Emphasized

For important movements

Emphasized Decelerate

Elements entering

Emphasized Accelerate

Elements exiting

Standard

Standard transitions

Standard Decelerate

Incoming elements

Standard Accelerate

Outgoing elements

Duration Scale

50ms

100ms

150ms

200ms

250ms

300ms

350ms

400ms

450ms

500ms

550ms

600ms

ShortMediumLong

Reduced Motion

Users who experience motion sickness or vestibular disorders can enable prefers-reduced-motion in their OS settings. Your app should respect this preference by replacing motion-heavy transitions with instant or fade-only alternatives.

Keep: Opacity fades and simple color transitions
Remove: Slide, scale, rotation, and parallax animations
Replace: Complex enter/exit transitions with instant state changes
Preserve: Essential feedback animations (loading indicators, progress bars)

CSS Implementation

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScript Detection

const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;

Easing Curves

Emphasized

cubic-bezier(0.2, 0, 0, 1.0)

Primary expressive motion (enter+exit combined)

Emphasized Decelerate

cubic-bezier(0.05, 0.7, 0.1, 1.0)

Elements entering the screen

Emphasized Accelerate

cubic-bezier(0.3, 0, 0.8, 0.15)

Elements leaving the screen

Standard

cubic-bezier(0.2, 0, 0, 1.0)

Most common transitions

Standard Decelerate

cubic-bezier(0, 0, 0, 1.0)

Enter transitions (standard)

Standard Accelerate

cubic-bezier(0.3, 0, 1.0, 1.0)

Exit transitions (standard)

Duration Tokens

Short

Short 150ms

Micro: ripple start

Short 2100ms

Small icon transitions

Short 3150ms

Small state changes

Short 4200ms

Checkbox/radio/switch

Medium

Medium 1250ms

Small expand/collapse

Medium 2300ms

Navigation transitions

Medium 3350ms

Medium expand

Medium 4400ms

Standard component transition

Long

Long 1450ms

Large expand

Long 2500ms

Complex component transition

Long 3550ms

Route/page transitions

Long 4600ms

Full-page transitions

Extra Long

Extra Long 1700ms

Large hero transitions

Extra Long 2800ms

Staggered animation groups

Extra Long 3900ms

Complex orchestrations

Extra Long 41000ms

Maximum transition time

Interactive Demo

Easing Curve

Duration

transition: all 300ms cubic-bezier(0.2, 0, 0, 1.0)

M3 Motion Principles

Material Design 3 motion creates a unified, expressive feel:

Emphasized: Expressive motion for attention-grabbing transitions (primary enter/exit)
Standard: Utilitarian motion for common state changes
Decelerate: Elements entering the screen slow down at the end
Accelerate: Elements leaving the screen speed up at the end

Duration tokens are organized into categories: Short (50-200ms), Medium (250-400ms), Long (450-600ms), and Extra Long (700-1000ms).

Interactive Motion Comparison

Easing Curve Comparison

Emphasized

For important movements

Emphasized Decelerate

Elements entering

Emphasized Accelerate

Elements exiting

Standard

Standard transitions

Standard Decelerate

Incoming elements

Standard Accelerate

Outgoing elements

Duration Scale

50ms

100ms

150ms

200ms

250ms

300ms

350ms

400ms

450ms

500ms

550ms

600ms

ShortMediumLong

Reduced Motion

Keep: Opacity fades and simple color transitions
Remove: Slide, scale, rotation, and parallax animations
Replace: Complex enter/exit transitions with instant state changes
Preserve: Essential feedback animations (loading indicators, progress bars)

CSS Implementation

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScript Detection

const prefersReduced = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;