Transitions

Summary

The `transition` property smoothly animates a property change (like a hover color or size) over a set duration instead of jumping instantly. Transitions are best for changes between two states, such as hover or focus, while keyframe animations are better for multi-step or repeating sequences.

• 1Add a smooth hover transition to buttons and links. Test the result on both a successful path and an invalid or unexpected input.
• 2Practice `transition-property`, `duration` and `easing` together. Test it with at least one normal case and one edge case so you can explain the behavior confidently.
• 3Learn why animating `transform`/`opacity` performs better than `width`/`top`.