11 Using Bezier curves for smooth animation

As you surf the web, you occasionally come across pages that offer 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 will help you understand why certain effects create such a positive response because there's a good chance that the math behind those effects involves Bezier curves.

11.1 Introduction to Bezier curves

Before diving into CSS syntax and implementations of Bezier curves, it's crucial to understand what Bezier curves actually are and how they work mathematically. Think of a Bezier 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 Bezier curve?

11.1.2 The mathematical construction of Bezier curves

11.1.3 Quadratic vs cubic Bezier curves

11.1.4 The role of cubic Bezier curves in animations

11.2 Cubic Bezier 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 Bezier curves

11.3.1 Entrance animations

11.3.2 Exit animations

11.3.3 Interactive feedback animations

11.4 Answers to Exercises

11.5 Summary