CSS三次贝塞尔生成器

  比较过度效果

cubic-bezier( 0.79, 0.33, 0.14, 0.53 ) ← 可编辑!
线性
缓出
缓入缓出
缓入
1s

CSS三次贝塞尔生成器

CSS 三次贝塞尔生成器用于通过从时间与进度图获取有关动画的信息或直接预览动画来生成三次贝塞尔缓和函数的 CSS 代码。

在 Web 开发中创建动画时，大多使用线性过渡，因为大多数动画都很短，用户可能感觉不到线性 CSS 动画和具有缓动功能的动画之间的区别。但是，如果您正在处理持续时间超过约 0.5 秒的复杂动画，则使用更自然的缓动功能或弹性运动非常重要，这更能吸引用户。CSS 中有预定义的缓动功能可用于更好的动画，这些缓动功能包括缓动、缓入、缓出和缓入缓出。当这些缓动类型不够用时，在 CSS 中管理动画时间的最佳方法是使用三次贝塞尔缓动功能。

CSS 三次贝塞尔动画计时函数中有 4 个参数，它们定义了 2 个点 P1 和 P2 的位置。第一个点 P1 标识动画开始时的进度，而 P2 标识动画结束时的进度。三次贝塞尔曲线在坐标系中定义，从点 (0,0) 到点 (1,1)。这些点之间的路径描述了 CSS 动画的进度。

通过定义这两个点的 x 和 y 坐标，您可以使用 CSS 中的三次贝塞尔函数定义所有动画的进度。x 值限制在 0 到 1 之间，而 y 值可能在负无穷到正无穷之间。但是，就实现自然动画进度而言，工具中的值限制在 -2 到 +2 之间。

如何使用在线 CSS 三次贝塞尔生成器？

您可以按照以下简单的步骤生成三次贝塞尔动画计时函数的 CSS 代码。
  1. 首先，您需要选择 4 个坐标来构建三次贝塞尔曲线的起点和终点。
  2. 点击比较过渡效果即可在线预览动画，如果结果不令人满意，您可以通过更改坐标进行微调。此外，该图有助于预测 CSS 动画的进度，其路径和斜率给出了有关结果的想法。
  3. 默认动画持续时间为 1 秒，您可以在 0 到 5 秒的范围内更改它。此外，还可以从列表中选择预定义的 CSS 动画计时函数，查看它们的行为方式。
  4. 最后复制生成的CSS代码粘贴到样式表中，即可将其复制并用于您的项目中。