A free, self-paced textbook in 7 chapters. Read a chapter, then drill it with the 120 companion flashcards using spaced repetition.
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...
A transition is enabled with the transition shorthand, which combines four longhand properties: transition-property, transition-duration, transition-timing-function, and transition...
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...
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...
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...
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...
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...