Question 1

What is a cubic-bezier function?

Accepted Answer

A cubic-bezier function defines a smooth curve used as a timing function in CSS animations and transitions. It takes four parameters (x1, y1, x2, y2) that control the shape of the curve and thus the speed of the animation.

Question 2

What does the animation-timing-function property do?

Accepted Answer

The animation-timing-function CSS property specifies how an animation progresses through each cycle. It controls whether the animation accelerates, decelerates, or moves at a constant speed.

Question 3

What is the difference between ease and ease-in-out?

Accepted Answer

ease starts fast and slows down toward the end. ease-in-out starts slow, speeds up in the middle, and then slows down again at the end, creating a more natural feel for most UI animations.

Question 4

Can y values go outside the 0 to 1 range?

Accepted Answer

Yes. Unlike x values which must stay between 0 and 1, y values can go beyond that range to create overshoot or bounce effects (e.g., ease-in-back, ease-out-back presets).

Question 5

How do I apply the generated timing function to an animation?

Accepted Answer

Copy the generated CSS and apply it with animation-timing-function: cubic-bezier(x1, y1, x2, y2) or transition-timing-function: cubic-bezier(x1, y1, x2, y2) in your stylesheet.

Animation Timing Generator

Presets

Custom

Preview

Frequently Asked Questions

Comments & Feedback