Question 1

什么是cubic-bezier函数？

Accepted Answer

cubic-bezier函数定义了一条平滑曲线，用作CSS动画和过渡的时序函数。它接受四个参数（x1, y1, x2, y2）来控制曲线的形状，从而控制动画的速度。

Question 2

animation-timing-function属性有什么作用？

Accepted Answer

animation-timing-function CSS属性指定动画在每个循环中的进展方式。它控制动画是加速、减速还是匀速运动。

Question 3

ease和ease-in-out有什么区别？

Accepted Answer

ease开始很快，末尾减慢。ease-in-out开始缓慢，中间加速，最后再次减慢，为大多数UI动画创造更自然的感觉。

Question 4

y值可以超出0到1的范围吗？

Accepted Answer

可以。与必须保持在0到1之间的x值不同，y值可以超出该范围，以创建过冲或弹跳效果（例如ease-in-back、ease-out-back预设）。

Question 5

如何将生成的时序函数应用到动画中？

Accepted Answer

复制生成的CSS，在样式表中以animation-timing-function: cubic-bezier(x1, y1, x2, y2)或transition-timing-function: cubic-bezier(x1, y1, x2, y2)的方式应用。

动画时序生成器

预设