Bézier curves in CSS are mainly used to define animation timing functions and draw smooth paths in properties such as background-image, clip-path, shape-outside, etc. This article mainly discusses the application of Bezier curves in CSS animations, especially how to use them when defining animation timing curves.
cubic-bezier() function
In CSS animations and transition effects, Bezier curves are represented by the cubic-bezier() function. This function defines a cubic Bezier curve that describes the speed (i.e., rate of change) of an animation over time. A cubic Bezier curve is defined by four control points, but in the cubic-bezier() function, we only need to provide four values between 0 and 1, representing the coordinates of the two control points:
cubic-bezier(x1, y1, x2, y2)
- x1 and y1: The coordinates of the first control point, usually called the starting point (P0), with a default value of (0, 0). They can be ignored here because they are always (0, 0).
- x2 and y2: The coordinates of the second control point determine the shape of the curve and directly affect the speed change of the animation. These two values are key and can be set freely.
/* Define an animation speed curve that eases in and out */
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
/* Or use more common predefined keywords */
transition-timing-function: ease-in-out;Predefined Bezier curve keywords
For ease of use, CSS provides a series of predefined Bezier curve keywords, which are actually abbreviations of the cubic-bezier() function:
ease: Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1), with slower speeds at the beginning and end and accelerated speeds in the middle.linear: Equivalent to cubic-bezier(0, 0, 1, 1), uniform animation.ease-in: Equivalent to cubic-bezier(0.42, 0, 1, 1), slowly accelerates at the beginning of the animation.ease-out: Equivalent to cubic-bezier(0, 0, 0.58, 1), slowly decelerates at the end of the animation.ease-in-out: Equivalent to cubic-bezier(0.42, 0, 0.58, 1), slowly accelerates and decelerates at the beginning and end of the animation.
Bezier Curve Visualization Tool
The most intuitive way to understand the shape of a Bezier curve and how it affects the speed of an animation is to use a visualization tool. For example:
Cubic-bezier.com: An online editor that allows you to enter the parameters of the cubic-bezier() function and preview the curve and the corresponding animation effect in real time.CSS-Tricks Timing Function Generator: Another interactive tool to help you generate and test custom Bezier curves.
Properties that apply Bezier curves
Bezier curves are mainly used in the following CSS properties:
- animation-timing-function: Defines the speed curve of @keyframes animation.
- transition-timing-function: Defines the speed curve of CSS transition effects.
/* Animation example */
div {
animation: myAnimation 2s cubic-bezier(0.½, 0, 0.¾, 1);
}
/* Transition example */
div:hover {
transform: scale(1.2);
transition: transform 0.5s cubic-bezier(0.¼, 0, 0.⅔, 1);
}
