CSS Transitions

CSS transitions make it possible for element state changes (such as color, size, position) to happen gradually in an animated way, instead of instantly.

Simple color transition

With the transition property, the background color of a button can gradually change to another color on hover.

In this example, the button’s base color is set to blue, and on hover it changes to green with a slow transition.

Size change with transition

Transitions can be used not only for colors but also for sizes. A box’s width and height can gradually increase on hover.

Transition properties

A transition is built from multiple sub-properties, each controlling a specific part of the animation.

Property	Description
transition-property	Specifies which CSS property the transition applies to.
transition-duration	The duration of the transition in seconds or milliseconds.
transition-timing-function	The timing function of the transition, such as ease, linear, ease-in, ease-out.
transition-delay	Delay before the transition starts.

Tips for CSS transitions

The following tips will help you use CSS transitions effectively:

Do not animate too many properties at once, as it can harm performance.
Use short durations so the animation does not feel too slow.
Combine transitions with :hover, :focus, or :active states for better user experience.