11 Using Bézier curves for smooth animation

As you surf the web, you occasionally encounter pages with beautifully crafted interface transitions and other animated effects. You can’t quite put your finger on why these effects work; you only know that they somehow feel just right. This chapter explains why certain effects create such a positive response. And there is a good chance the math behind those effects involves Bézier curves.

11.1 Introduction to Bézier curves

Before diving into CSS syntax and implementations of Bézier curves, it’s crucial to understand what Bézier curves are and how they work mathematically. Think of a Bézier curve as a mathematical recipe for creating smooth, flowing lines between points. These lines can be gentle and gradual or sharp and dramatic, depending on how you configure them.

11.1.1 What is a Bézier curve?

11.1.2 The mathematical construction of Bézier curves

11.1.3 Quadratic vs. cubic Bézier curves

11.1.4 The role of cubic Bézier curves in animations

11.2 Cubic Bézier curves in CSS

11.2.1 The cubic-bezier() function

11.2.2 Understanding the four control point values

11.2.3 Built-in CSS easing keywords

11.3 Customizing animations with Bézier curves

11.3.1 Entrance animations

11.3.2 Exit animations

11.3.3 Interactive feedback animations

11.4 Answers to exercises

Summary