CSS

CSS Animations & Transitions Cheat Sheet

Everything needed to animate with CSS alone: transitions for state changes, keyframes for multi-step motion, and the transforms that keep it smooth.

Put it into practice with the matching tool.

Transitions

transition: opacity 200ms ease-outAnimate one property when it changes

transition: transform 300ms, opacity 300msSeveral properties, each with its own timing

transition-delay: 100msWait before starting

transition-property: allAnimate every animatable property (can be costly)

transition-behavior: allow-discreteAllow transitions on discrete properties such as display

@starting-style { ... }Starting values for an element's entry transition

@keyframes spin { to { rotate: 360deg; } }Define a named animation

from { } to { }Same as 0% and 100%

0%, 100% { } 50% { }Share one keyframe between several points

animation: spin 1s linear infiniteShorthand: name, duration, timing, iterations

animation-delay: 200msWait before starting (negative starts part-way)

animation-iteration-count: 3Number of runs (or infinite)

animation-direction: alternatePlay forwards, then backwards

animation-fill-mode: bothKeep the first frame during delay and the last after the end

animation-play-state: pausedPause and resume

animation-timeline: view()Drive the animation by scroll position (scroll-driven animations)

easeDefault: slow start, fast middle, slow end

linearConstant speed — good for spinners

ease-outFast start, gentle stop — good for elements entering

ease-inGentle start, fast end — good for elements leaving

cubic-bezier(.2, .8, .2, 1)Custom curve

steps(8, end)Jump in discrete steps — sprite sheets, typewriter effects

translate: 0 -8pxMove without affecting layout

scale: 1.05Grow or shrink

rotate: 45degRotate

transform-origin: top leftPivot point for scale and rotate

will-change: transformHint the browser to prepare a layer (use sparingly)

@media (prefers-reduced-motion: reduce)Tone down or remove motion for users who ask for less

@media (prefers-reduced-motion: no-preference)Only add big motion when the user has not opted out

CSS Keyframe Animations: A Practical Guide