CSS transition
CSS smoothing out a property change between two states, so a hover or class toggle glides instead of snapping.
See it
What it is
A transition needs three things: a from-value, a to-value, and something that flips one to the other (a hover, a focus, a class toggled by JS, a media query change). The browser fills in the frames. One line covers it: 'transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1)'.
Reach for transitions on anything with exactly two states: hovers, toggles, open and closed panels, theme switches. The moment you need waypoints in the middle, looping, or motion that begins with no state change at all, you have outgrown transitions and want a CSS animation with keyframes.
Gotchas, several. Never write 'transition: all', it quietly animates properties you never meant and pays for layout work you did not ask for, so list the properties. Both states need a real computed value, and two different things break that. 'display: none' is a discrete value, so animating in and out of it needs 'transition-behavior: allow-discrete' plus '@starting-style' for the first-paint from-state. 'height: auto' is a separate problem: auto is an intrinsic keyword rather than a length, and transitioning to it needs 'interpolate-size: allow-keywords' or one of the measuring workarounds. And declare the transition on the base state, not inside ':hover', or it only plays on the way in.
Ask AI for it
Animate this with a CSS transition instead of a JS animation library. Transition only transform and opacity (never 'all'), 200ms, cubic-bezier(0.22, 1, 0.36, 1). On :hover and :focus-visible, lift the element with translateY(-2px). Do not transition the box-shadow itself: put the raised shadow on an ::after pseudo-element sitting behind the card at opacity 0, and transition that pseudo-element's opacity to 1 alongside the transform, both over the same 200ms and the same curve, so the shadow fades in instead of snapping. Return to rest on blur and pointer-out using the same curve. Put the transition declarations on the base rules, not inside the hover rule, so they play in both directions, and wrap the motion in a 'prefers-reduced-motion: no-preference' guard.