Change smoothly with transition

Last time you saw an example where a button softly grew when you moved the cursor over it. That “softly” is transition.

With nothing added, it “snaps” over

First, let’s see what happens with no transition.

Both the color and the corner rounding switch over with a jolt the instant the cursor lands.

Add transition and it changes “softly”

Just add one line, transition, to that same CSS.

It’s the same change, yet the impression is completely different.

How to write transition

<div class="box">Hover over me</div>

.box {
  transition: background-color 0.4s ease;
}

Separated by spaces, each part means this:

When you want to smooth several properties at once, separate them with commas (like background-color 0.4s ease, border-radius 0.4s ease in the example above). When you want all of them smoothed together, you can also use all in place of a property name.

<div class="box">Hover over me</div>

.box {
  transition: all 0.4s ease;
}

Easing: the rhythm of the change

Change the ease part and you change how the motion picks up speed.

How long should the time be?

The s in 0.4s means seconds. 0.2s is 0.2 seconds. This one number changes the impression a lot.

When in doubt, start from 0.2–0.3 seconds and adjust as you try it out for real. The length that feels “good” also changes with the size of the part you’re moving.

Delay the start with transition-delay

Write two time values and the second becomes “the wait before it starts” (the delay).

<div class="box">Hover over me</div>

.box {
  transition: background-color 0.4s 0.2s ease;
}

In this example the motion is “the cursor lands, it waits 0.2 seconds, then the color changes over 0.4 seconds.” It shines when you want to stagger the start of several elements a little and have them change in order.

Some properties can’t be transitioned

transition can only smooth values where an in-between state can be calculated. For a color, “a shade between purple and orange”; for a size, “180px between 160px and 200px” — these can be made, so they can change smoothly.

On the other hand, values with no in-between, like display: none and display: block, snap over even with transition added.

Summary of this lesson

1. Add transition and a value’s change becomes smooth
2. The way to write it is property-name time easing
3. Use all for all properties, and commas to specify several
4. Put transition on the element before the change