How to add a smooth transition

Short answer

transition says which property to change smoothly and how long it takes:

<style>
  .box { width: 80px; padding: 12px; background: tomato; color: white; transition: width 0.4s; }
  .box:hover { width: 220px; }
</style>
 
<div class="box">Hover</div>

Several properties and easing

List the properties with commas. The third value is the easing function: ease-in-out speeds up and slows down, linear moves evenly, and cubic-bezier() sets a custom curve:

<style>
  .chip { display: inline-block; padding: 8px 14px; border-radius: 20px; background: lavender;
    transition: background-color 0.3s ease-in-out, transform 0.3s cubic-bezier(0.3, 1.6, 0.6, 1); }
  .chip:hover { background: plum; transform: translateY(-4px); }
</style>
 
<span class="chip">Bouncy chip</span>

Delay

The fourth value is a delay before it starts. For example, transition: opacity 0.2s ease 0.5s starts after half a second, so a tooltip does not flash when the pointer just passes by.

What animates best

The browser animates transform and opacity almost for free. Animating width, height, top or margin makes it recalculate the page layout and can stutter on slow phones.

Common mistake

transition: all looks convenient but animates everything that changes — including things you did not mean to animate, like colors when the theme switches. List the properties you need explicitly. And remember: display and height: auto do not transition smoothly with a plain transition.