1. Foundations: Why Animate with CSS?
CSS gives designers two complementary tools for motion on the web: transitions and animations. A transition is designed to animate smoothly between two states of a property when th...
Read full chapter →The essential CSS Animations & Transitions cheat sheet: 7 concise chapters you can read in minutes, distilled from the full deck. When you're ready, drill the flashcards or test yourself under exam conditions.
CSS gives designers two complementary tools for motion on the web: transitions and animations. A transition is designed to animate smoothly between two states of a property when th...
Read full chapter →A transition is enabled with the transition shorthand, which combines four longhand properties: transition-property, transition-duration, transition-timing-function, and transition...
Read full chapter →CSS animations are powered by the @keyframes rule, which defines named stages of a timeline and the styles an element should have at each stage. The syntax looks like @keyframes na...
Read full chapter →Easing is the function that maps time progress to animation progress, controlling the perceived acceleration and deceleration of motion. CSS provides several built-in keywords. eas...
Read full chapter →The transform property applies 2D or 3D transformations to an element without affecting surrounding layout. Common 2D transform functions include translate, which moves an element...
Read full chapter →Browsers aim for 60 frames per second, meaning each frame should complete in roughly 16.7 milliseconds. To understand animation performance, it helps to know the rendering pipeline...
Read full chapter →Many common UI patterns are built from transitions and animations. The simplest hover effect uses a transition on a property that changes on :hover, for example a button that smoot...
Read full chapter →Done reading?
Test yourself with the CSS Animations & Transitions practice exam — timed questions, instant score, full review of wrong answers. Free.
🎯 Take the Practice Exam →