Token

Motion

Motion tokens define animation timing and easing to create smooth, consistent interactions throughout the interface.

Overview

Motion tokens provide consistent timing and easing for all animations and transitions. Using these tokens ensures a cohesive feel across all interactive elements and helps maintain performance by avoiding overly long animations.

Purposeful

Motion should guide attention and provide feedback, not distract.

Quick

Animations should feel responsive, never making users wait.

Natural

Easing functions should mimic natural physics for intuitive feel.

Durations

Five duration values from instant to slow, covering all common animation needs.

--motion-duration-instant 0ms No transition, immediate change

--motion-duration-fast 100ms Quick interactions like hover states

--motion-duration-normal 200ms Standard transitions

--motion-duration-slow 300ms Deliberate transitions

--motion-duration-slower 400ms Emphasis transitions

Easing Functions

Easing functions control the acceleration curve of animations, making them feel more natural.

--motion-easing-linear Constant speed throughout

--motion-easing-ease-in Starts slow, accelerates

--motion-easing-ease-out Starts fast, decelerates

--motion-easing-ease-in-out Smooth start and end

--motion-easing-spring Bouncy, playful feel

Usage

Combine duration and easing tokens for smooth, consistent transitions.

Basic Transition

.button {
  transition: background-color var(--motion-duration-fast) var(--motion-easing-ease-out);
}

.button:hover {
  background-color: var(--background-interactive-primary);
}

Multiple Properties

.card {
  transition:
    transform var(--motion-duration-normal) var(--motion-easing-ease-out),
    box-shadow var(--motion-duration-normal) var(--motion-easing-ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--elevation-300);
}

CSS Animations

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal {
  animation: fadeIn var(--motion-duration-normal) var(--motion-easing-ease-out);
}

Guidelines

Duration Selection

Hover states --motion-duration-fast

Button clicks --motion-duration-fast

Dropdown menus --motion-duration-normal

Modal open/close --motion-duration-normal

Page transitions --motion-duration-slow

Complex animations --motion-duration-slower

Easing Selection

Elements entering --motion-easing-ease-out

Elements exiting --motion-easing-ease-in

State changes --motion-easing-ease-in-out

Playful interactions --motion-easing-spring

Progress indicators --motion-easing-linear

Accessibility

Respect Motion Preferences

Always respect the user's reduced motion preference. Use the prefers-reduced-motion media query to disable or reduce animations for users who prefer less motion.

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}