Mark Thomas Miller

The cubic-bezier CSS transition

There is a tendency for web designers to ignore humanistic details in their work. They usually opt for the simplest approach, like a linear transition, rather than expending extra effort to make an animation feel fluid and natural.

Covering the little details – that last one percent of work – will leave any technological interaction feeling experiential. Subtle flourishes can make a design feel squishy, delightful, and premium.

For instance, I wrote a post on Google font combinations that takes advantage of cubic-bezier transitions when a user hovers over the live demos. I receive so many inquiries about this post’s transition effect: “How did you make this? It feels different than a regular hover effect, but I can’t tell exactly why.”

Cubik-bezeldorf makes things feel good?

cubic-bezier can make things feel good. It gives you fine-tuned control over how you want an interaction to feel. In simple terms, it’s a mathematical function that produces a more natural-looking transitions than would a constant-speed, or linear, function.

Think of it like the natural movement of walking – in the first seconds of starting to walk, you move slowly as you pick up speed. Then, you walk at a constant pace. Finally, you slow down before coming to a complete stop. This is similar to an ease-in-out transition property, although it allows you the opportunity to customize the animation’s velocity to appear exactly the way you want it.

Watch the bottom square from one side to the other. It is a linear transition, and it feels robotic compared to the graceful, natural cubic-bezier square (top).

The cubic-bezier function takes four arguments between 0 and 1.

cubic-bezier(x1, y1, x2, y2)

To use the function, you can simply call it when you’re defining your transitions:

.element {
    transition: color 1s cubic-bezier(.17, .67, .83, .67);
}

A more comprehensive version with browser prefixes would look like this:

.element {
    -webkit-transition: color 1s cubic-bezier(.17,.67,.83,.67); 
    -moz-transition: color 1s cubic-bezier(.17,.67,.83,.67);
    -o-transition: color 1s cubic-bezier(.17,.67,.83,.67);
    transition: color 1s cubic-bezier(.17,.67,.83,.67);
}

I contemplated explaining the math in this post, but I feel that there are better sources for that elsewhere. If you’re just looking for a beginner’s understanding of this cubik-bezeldorf thing everyone is talking about, you can simply apply the knowledge in this post along with the handy generator at cubic-bezier.com.

Should I cubic-bezier ALL the things?

The best animations are the ones that users don’t really notice at all. I feel that cubic-bezier is a very handy function for coloring, opacity, and small movement transitions, but take care not to make your website look like a high school PowerPoint presentation.