Skip to main content
Ganesh Joshi
Back to Cheatsheets

CSS transitions and animations

Updated 2026-02-15

transition, animation, keyframes, and timing functions. Smooth state changes and keyframe animations.

Transition

transition: property duration timing delay; e.g. transition: opacity 0.3s ease; transition: all 0.2s; Properties: opacity, transform, color, etc. timing: ease, linear, ease-in, ease-out, cubic-bezier().

Animation and keyframes

@keyframes name { from { } to { } } or 0% { } 100% { }. animation: name duration timing delay iteration direction fill-mode; animation-name, animation-duration, etc. animation-fill-mode: forwards keeps end state.

CSS transitions and animations | Cheatsheet | Ganesh Joshi