CSS Animations and Transitions Cheat Sheet

Updated 2026-05-17

🧠Study flashcards on this topic78 cards · spaced repetition→

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, 78 flashcards. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: CSS Transition PropertiesTable 2: CSS Animation PropertiesTable 3: Keyframes and Animation DefinitionsTable 4: Timing Functions and EasingTable 5: 2D Transform FunctionsTable 6: 3D Transform FunctionsTable 7: Transform and Perspective PropertiesTable 8: Scroll-Driven AnimationsTable 9: View Transitions APITable 10: Accessibility and User PreferencesTable 11: Performance OptimizationTable 12: Advanced Animation TechniquesTable 13: Common Animation PatternsTable 14: Browser DevTools and Debugging

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

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	`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	`transition-property: opacity, transform;`	• Specifies which CSS properties to animate • use `all` to animate all animatable properties (can impact performance).
transition-duration	`transition-duration: 300ms;`	• Sets how long the transition takes • specified in seconds (`s`) or milliseconds (`ms`) • required for transition to occur.
transition-timing-function	`transition-timing-function: ease-in-out;`	• Controls the acceleration curve • determines how intermediate values are calculated over time
transition-delay	`transition-delay: 0.2s;`	• Time to wait before starting the transition • can be negative to start partway through
transition-behavior	`transition-behavior: allow-discrete;`	• Allows transitions for discrete properties like `display` and `visibility` that normally can't be animated • must come after shorthand.

Table 2: CSS Animation Properties

Animations use keyframes to define multi-step sequences that run automatically when applied to an element. These properties control every aspect of animation behavior—from timing and repetition to direction and final state—giving you precise declarative control over complex motion.

Property	Example	Description
animation	`animation: slide 2s ease-in-out 0.5s infinite alternate;`	• Shorthand for all animation properties • duration must precede delay (same as transition shorthand).

The rest of this section is part of the full cheat sheet

Table 3: Keyframes and Animation Definitions

Keyframes define the intermediate states in an animation sequence, mapping CSS property values to specific points in time. The browser automatically interpolates between these waypoints to create smooth motion.

Technique	Example	Description
@keyframes rule	`@keyframes fadeIn {` `0% { opacity: 0; }` `100% { opacity: 1; }` `}`	• Defines animation sequence with percentage or keyword waypoints • browser interpolates values between keyframes

The rest of this section is part of the full cheat sheet

Table 4: Timing Functions and Easing

Timing functions control how intermediate values are calculated during transitions and animations, creating acceleration and deceleration effects. The right easing makes animations feel natural, physical, and intentional rather than robotic.

Function	Example	Description
ease	`transition-timing-function: ease;`	• Default easing • starts slow, accelerates, then decelerates at end—most common for general use.

The rest of this section is part of the full cheat sheet

Table 1: CSS Transition Properties

Property	Example	Description
transition	`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	`transition-property: opacity, transform;`	• Specifies which CSS properties to animate • use `all` to animate all animatable properties (can impact performance).
transition-duration	`transition-duration: 300ms;`	• Sets how long the transition takes • specified in seconds (`s`) or milliseconds (`ms`) • required for transition to occur.
transition-timing-function	`transition-timing-function: ease-in-out;`	• Controls the acceleration curve • determines how intermediate values are calculated over time
transition-delay	`transition-delay: 0.2s;`	• Time to wait before starting the transition • can be negative to start partway through
transition-behavior	`transition-behavior: allow-discrete;`	• Allows transitions for discrete properties like `display` and `visibility` that normally can't be animated • must come after shorthand.

Table 2: CSS Animation Properties

Property	Example	Description
animation	`animation: slide 2s ease-in-out 0.5s infinite alternate;`	• Shorthand for all animation properties • duration must precede delay (same as transition shorthand).

Table 3: Keyframes and Animation Definitions

Technique	Example	Description
@keyframes rule	`@keyframes fadeIn {` `0% { opacity: 0; }` `100% { opacity: 1; }` `}`	• Defines animation sequence with percentage or keyword waypoints • browser interpolates values between keyframes

Table 4: Timing Functions and Easing

Function	Example	Description
ease	`transition-timing-function: ease;`	• Default easing • starts slow, accelerates, then decelerates at end—most common for general use.