CSS animations and transitions enable smooth, performant motion design on the web without requiring JavaScript. Animations use keyframes to define multi-step sequences, while transitions smoothly interpolate between property values when state changes occur. The distinction matters: transitions react to triggers (hover, focus, class changes), while animations run automatically once applied. Modern CSS has evolved dramatically—with scroll-driven animations, view transitions, and GPU-accelerated properties—making it possible to replace entire JavaScript animation libraries with declarative, browser-optimized motion that respects user preferences and accessibility needs.
What This Cheat Sheet Covers
This topic spans 14 focused tables and 94 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: CSS Transition Properties
Transitions animate property changes smoothly over time when triggered by state changes like hover, focus, or class toggles. Understanding the four core transition sub-properties—and how they combine in the shorthand—is fundamental to creating responsive, reactive animations.
| Property | Example | Description |
|---|---|---|
transition: opacity 0.3s ease-in-out 0.1s; | • Shorthand combining property, duration, timing function, and delay • duration must precede delay in shorthand syntax | |
transition-property: opacity, transform; | • Specifies which CSS properties to animate • use all to animate all animatable properties (can impact performance). | |
transition-duration: 300ms; | • Sets how long the transition takes • specified in seconds ( s) or milliseconds (ms)• required for transition to occur. |