Guided Notes
Transitions & Animations
Smooth state changes with transition, keyframe animations, timing functions, and reduced motion.
Transitions
Slide 1 / 5A transition animates a property when its value changes — usually on :hover or :focus, or when JavaScript adds a class:
.btn { background: #2563eb; transition: background-color 200ms ease, transform 200ms ease; } .btn:hover { background: #1d4ed8; transform: translateY(-2px); }
The parts: property, duration, timing function, and optional delay. transition: all 0.3s works but can animate things you didn't intend.