HTML and CSS Transitions

CSS transitions animate changes to CSS properties, creating smooth hover states, focus styles, and UI feedback without JavaScript.

• transition-property - which properties to animate (e.g., background-color , transform ).
• transition-duration - total time for the transition.
• transition-timing-function - easing curve (e.g., ease , cubic-bezier() ).
• transition-delay - wait time before animation starts.
• transition shorthand sets all four at once.

ease-in starts slow, while ease-out ends slow.

If you want to read more about CSS Transitions or get an in-depth understanding, go to CSS Transitions in our CSS tutorial.

This example animates background color and slight lift on hover/focus using the transition shorthand for smooth feedback.

On interaction, the background changes and the element translates up a few pixels.

The easing makes the motion feel responsive, not abrupt.

• Common curves: ease , linear , ease-in , ease-out , ease-in-out .
• Custom easing with cubic-bezier(x1, y1, x2, y2) .
• Use steps(n, direction) for discrete animations (menus, counters).

• Respect @media (prefers-reduced-motion: reduce) by disabling or simplifying transitions.
• Avoid large transform distances that cause layout shifts.
• Limit duration to 200-300ms for snappy feedback, longer for complex transitions.