Transitions

When we are creating user interactions, often] it can be nice to have a smooth transition between the two states, instead of a quick jump.

Creating a transition

To do this, we use the aptly named transition property.

This transition property is a shorthand for several properties, but it only requires one for us to be able to use it:

A duration in either seconds (s), or milliseconds (ms).

.button {
  color: black;
  background: white;

  transition: 500ms;
}

.button:hover,
.button:focus-visible {
  color: white;
  background: black;
}

The others that are part of the shorthand are:

transition-property
transition-delay
transition-timing-function
transition-behavior (relatively new)

Transition delay

The delay allows us to delay a transition from starting. This might seem strange, but it can come in handy!

See the Pen loading in menu items with delay by Kevin (@kevinpowell) on CodePen.

Timing functions

The transition-timing-function allows us to tweak the timing of the transition, having it speed up, slow down, etc.

If you want a custom one, I’d suggest using your Dev Tools, or a tool like Easing Wizard!

Be careful what you transition

It can be tempting to start creating all sorts of interesting transitions, but we need to be careful what we transition.

If we’re changing things like the size of an element, it will trigger repaints of the page, and can cause performance issues. Effects like shadows, or elements that have filters on them can cause noticeable jittering on even high-end devices!

In other situations, it can feel like something is safe to transition, like the left property of an absolutely positioned element, but that that too can cause problems.

When possible, you want to limit transitions to:

transforms
opacity

Yup, it’s a short list. That’s not to say you can’t transition anything else, but be careful when you do, and keep an eye out for low frame rates, specially on lower-end devices.