30 Days of CSS Girls

March 29, 2019

Bézier Curves

Ever dreaded about writing cubic-bezier(x1, y1, x2, y2)? Great, so did I!

Turns out that’s CSS’ attempt to resemble real world physics to its best effort. And it’s actually very effective. The Bézier Curves are commonly used in computer graphics to simulate curves. And that includes the hyperbolas — the curve along which objects move when you throw something into the air.

As a passionate front end developer, we thrive to recreate those animations as real as possible. Human eyes are sensitive. Even if things may be just slightly off, your audience will just “feel weird” even if they may not be able to tell why.

We’ll need to humbly learn from the great beautiful nature when we code :)

Objective

Let’s try implementing the animation in this design!

Original design: One Minimal Festival Homepage Alternative Version Animation by Zhenya Rynzhuk.

Reading

CSS Animations Level 1

Further

Here’s a blog article I wrote about Bézier Curves, mainly about the intuition.