From Sharpness to Smoothness

The transition property allows smoothly changing CSS property values over a specified time.

1. Main Parameters (Shorthand):

/* property | duration | timing-function | delay */
transition: background-color 0.3s ease-in-out 0.1s;

2. All vs Specific

Many write transition: all 0.3s.

Warning

transition: all is bad for performance. Browser has to monitor EVERY property of the element. Always specify specific properties: transition: transform 0.3s, opacity 0.3s.

Tip

Not everything can be animated. For example, display: none → block doesn't animate. For this, use opacity and visibility.