Many frontend developers and web designers have run into the term Bezier curve at some point in their career. Some have seen it on a graphics editor, others in animation tools. Most have propably passed by not quite knowing what’s really going on and getting by anyway.

Bezier curve is a mathematical curve based on an concept called the Bernstein polynomial. It provides a simple representation for smooth curves that makes it practical for many applications in computer graphics. Spatial representations of curve can be used to draw smooth surfaces while progression in time can also be smoothed with a Bezier curve.

I’ll be focusing on the things that matter to web developer – mostly animation as that’s where I feel the technique really excels. The graphics stuff is mostly beyond web so I won’t be covering that. At the moment the interactive examples aren’t unfortunately exactly mobile friendly. I’ll do my best to make things better.

Interactive cubic bezier curve. Observe that moving the control points outside the endpoints can create a curve that’s not smooth.

A bezier curve is defined by two endpoints and a number of control points in between. The curves used in computer graphics are generally either quadratic or cubic bezier curves. Quadratic curves have one control point and cubic ones have two. Highed degree curves are more intensive computationally and aren’t thus practical to use. More complex curves can be composed of several connected cubic beziers if needed.

When it comes to web, the most common place to run into bezier curves are CSS animation timings. As seen in the following example, a CSS transition can be animated with a timing path following a bazier curve. The method can be applied to any CSS transition, not just translational movement. One can alter the size, opacity or even color of an element with a curved path.

The animation timing of the box is controlled by a cubic bezier curve. The movement and animation of the box is pure CSS.

Is there any reason to actually take the time to master the Bezier curve for CSS animations? Why not just go with the default timing functions such as linear or ease-in? Sure, the few provided default options can get you far, but I’m sure that a point when they just won’t do will hit you too sooner or later.

Think of CSS colors. You can design good looking sites with just the named color options, build an entire site with goldenrod, aliceblue and mediumspringgreen – but you don’t. Why? Because why would you limit yourself to 140 colors out of over 16 000 000 possibilities. The same goes for animation timing. With so many possibilities, why would you go back to the few?

After all, animation has power way beyond the look of a web page. Good animation doesn’t just make the page look right – it makes the page feel right. A small animated effects that the user barely notices can actually be the essential building block that creates the experience of the page.

So, the next time you’re applying the animation for the tiny respnse after a button press or building another carousel to showcase The Important Things, why not take things a step further and make the animation just right?

It’ll be great.