Transition

Without a transition, a button changing color on hover or a panel expanding happens instantly, with a snap. With a transition, the change finishes smoothly over 150–300ms and looks more natural. In CSS you use the transition property, like transition: background-color 0.2s ease, to set which properties change, how long it takes, and which easing curve to use.

Transitions suit simple "state A to state B" changes: hover, expand and collapse, a dialog fading in, a drawer sliding out. For animations that loop or have several stages, use @keyframes animations.

For performance, prefer transitioning transform and opacity. Animating width, height, or top tends to lag. You can also use the prefers-reduced-motion media query to turn off animations for users who have "Reduce motion" turned on.