CSS Visual ToolsLesson 86Free preview

Cubic Bezier Editor

This lesson is part of Web Developer Tools · All levels

Summary

The cubic bezier editor helps design the timing curve for CSS transitions and animations. You set up two control dots so that the movement can be accelerated, slowed down, or even slightly over the end value. The right curve makes the animation feel more natural and fit the character interface.

Key points

The cubic-bezier receives four values: x1, y1, x2, y2
The x value should be between 0 and 1.
The value of y must be outside 0-1 for the overshoot effect
Cubic-bezier(0,0,1,1) is equal to linear
Easing curves affect perception of speed, not total duration

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.