CSS Keyframe Animations Cheatsheet

@keyframes defines the steps of an animation, and the animation-* properties control how those steps play: how long, how many times, in which direction, and what happens when they finish. This cheatsheet gathers the whole toolkit on one page, each snippet annotated line by line. Keep it open while you code, or save the image and pin it nearby.

For the full background, read the guide to CSS keyframe animations. To practise, work through the 10 code-along examples.

See you soon, Andrei.