cubic-bezier(0.25, 0.10, 0.25, 1.00)
●
Generated CSS
每个CSS过渡和动画都有一条缓动曲线——一个数学函数，控制动画值随时间如何变化。水平轴表示时间（0=开始，1=持续时间结束），垂直轴表示动画值的进度（0=起始值，1=结束值）。直对角线意味着线性运动——全程匀速。
cubic-bezier()函数是CSS中定义任何自定义缓动曲线的机制。它使用两个控制点——P1和P2——来描述三次贝塞尔曲线，这两个点像磁铁一样吸引曲线，但曲线不会穿过它们。P0始终固定在(0,0)，P3始终固定在(1,1)。
P1和P2的X值必须保持在0到1之间——它们代表时间点，不能在动画开始前或结束后。然而，Y值可以超出范围。Y值大于1意味着动画属性在落定前暂时超过其最终值——这是产生弹簧和弹跳效果的过冲。Y值小于0意味着回弹（预期/蓄力效果）。
开始时的陡坡意味着快速初始运动；平缓的坡意味着慢速开始。曲线超过Y=1线意味着动画会过冲。S形曲线——两端平缓中间陡峭——是ease-in-out系列。
CSS提供五个关键字别名。ease是浏览器默认值——快速开始，非常平缓地减速，对大多数UI交互感觉自然。ease-out开始最快、结束最慢，是从屏幕外进入元素的最佳选择。ease-in相反——慢速开始，快速结束——适合退出的元素。ease-in-out对称，适合两个等重状态之间的过渡。linear没有任何缓动。
设计社区在现代UI中到处使用几个命名的自定义曲线。Material Design使用cubic-bezier(0.4, 0, 0.2, 1)用于状态间过渡，cubic-bezier(0, 0, 0.2, 1)用于进入，cubic-bezier(0.4, 0, 1, 1)用于退出。"expo out"曲线cubic-bezier(0.16, 1, 0.3, 1)在侧边栏和抽屉动画中非常流行。
steps()函数根本不是曲线——它产生离散跳跃而不是连续插值。它对精灵表动画（需要在帧之间跳跃，而不是插值）、打字机效果和光标闪烁效果至关重要。
CSS最近获得了一个linear()时序函数，允许你通过在特定时间百分比处指定一系列进度值来定义分段线性缓动曲线。这解锁了可以多次改变方向的缓动曲线，比如多次弹跳的弹簧。
最有影响力的规则是将曲线的性格与元素所代表的物理特性匹配。进入视口的元素应该使用ease-out变体。退出的元素应该使用ease-in变体。在两个等重状态之间转换的元素最适合ease-in-out。需要感觉有趣的元素可以从轻微过冲的弹簧曲线中获益。
cubic-bezier()函数在transition-timing-function和animation-timing-function中工作方式相同。在关键帧动画中，你甚至可以为每个关键帧指定不同的时序函数。
Chrome和Edge DevTools内置了贝塞尔曲线编辑器。检查任何带有transition或animation-timing-function属性的元素时，你会在时序函数值旁边看到一个小曲线图标。点击它会打开一个交互式曲线编辑器，与本页工具几乎相同。
可以——只有Y值可以超出0到1的范围。X值必须保持在0到1之间，因为它们代表时间。Y高于1 = 过冲（弹簧）；Y低于0 = 回弹（预期/蓄力效果）。
ease快速开始，逐渐减速——对大多数UI交互感觉自然灵敏。ease-in-out完全对称（两端同样慢），更适合慎重的面板过渡。
CSS三次贝塞尔曲线是固定的数学曲线——当动画在中途被中断时，它们无法响应元素的当前速度。Framer Motion或GSAP等JavaScript弹簧物理库可以在中断时保持当前速度，产生更流畅的交互效果。
当你需要离散跳跃而不是连续运动时使用steps()——精灵表帧推进、打字机字符显示、光标闪烁。使用cubic-bezier()用于任何你想要平滑连续插值的动画。
有——本页上的生成器显示实时画布预览，当你拖动控制点时更新。你也可以打开Chrome DevTools，检查任何带有过渡的元素，点击时序函数值旁边的曲线图标打开浏览器内置的曲线编辑器。