Transitions & Animations

A 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.