Transitions

Animation timing for smooth interactions.

Speed Scale

Token	Duration	Use Case
transition-fast	0.15s ease	Hover states, button presses
transition-normal	0.2s ease	Focus states, small reveals
transition-slow	0.3s ease	Panel slides, modal fades
transition-smooth	0.5s cubic-bezier	Page transitions, large animations

Interactive Demo

Usage

.my-button {
  transition: all var(--sw-transition-fast);
}

.my-button:hover {
  background: var(--sw-bg-hover);
}

.my-modal {
  transition: opacity var(--sw-transition-slow);
}