“transition-timing-function:cubic-bezier();”属性如何工作

Question

“transition-timing-function:cubic-bezier();”属性如何工作

3

请问有人能够解释一下"transition-timing-function:cubic-bezier();"的工作原理吗？

以下是我的代码：

.sample_box{
    background-color: orange;
    height: 70px;
    width: 35%;
    transition: width 2s;
    transition-timing-function: cubic-bezier(0.1,0.1,0.8,3.0);
 }
.sample_box:hover{
    width: 100%;
}

我曾试图将2秒钟分成4个部分，作为“cubic-bezier”的值，但我的框在悬停时完全失控，在两个方向上都会离开屏幕

- Pall Arpad

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

你需要一些数学背景才能深入理解函数，因为该函数定义了cubic-bezier曲线的控制点。我不是数学专家，只能解释其中的CSS部分。如果你真的需要关于如何绘制cubic bezier曲线的详细信息，请等待看看是否能在这里得到更好的答案（或者）尝试在适合问题的数学SE站点上提问。

cubic-bezier曲线是基于四个点P0、P1、P2和P3绘制的曲线。这里的点P0和P3是曲线的起点和终点，而P1和P2是控制点，用于定义曲线的曲率。 cubic-bezier 时间函数提供的四个输入值指定了三次贝塞尔曲线的控制点 P1 和 P2 的坐标（对于 CSS 使用的曲线，点 P0 和 P3 坐标分别为 (0,0) 和 (1,1))。基于绘制出的曲线（使用输入值），用户代理将确定在任何给定时间点上过渡或动画必须完成的进度量。

如 W3C 规范中所述，x 值（参数 1 和 3）的值应始终介于 0-1，而 y 值（参数 2 和 4）的值可以超出此范围。以下是摘录：

两个 x 值必须在 [0,1] 范围内，否则定义无效。y 值可以超出此范围。

如果您想查看如何根据输入值绘制曲线以及如何在任何给定时间显示进度的实时演示，您可以参考Lea Verou创建的优秀页面。它允许您更改图表上控制点的值，查看基于此更改的曲线变化，并且还允许您查看该曲线在实际转换中的演示。

对于cubic-bezier(0.1,0.1,0.8,3.0)绘制的曲线看起来像this，正如您所看到的，在这条曲线下，在过渡完成之前宽度超过了100％，然后在最后回到100％（因为那是结束值）。对于悬停退出，它将是相反的行为，因此它将在达到结束值之前走另一条路线（对于您的示例，您将看不到它，因为宽度不能低于0％，但您将在下面的第二个示例中看到它。）

.sample_box {
  background-color: orange;
  height: 70px;
  width: 35%;
  transition: width 2s;
  transition-timing-function: cubic-bezier(0.1, 0.1, 0.8, 3.0);
}
.sample_box:hover {
  width: 100%;
}

/* just for demo */

div.container {
  height: 200px;
  width: 300px;
  border: 1px solid;
  margin: 0px auto;
}

.sample_box_2 {
  background-color: tomato;
  height: 70px;
  width: 35%;
  transform: translate(0%, 0%);
  transition: transform 2s;
  transition-timing-function: cubic-bezier(0.1, 0.1, 0.8, 3.0);
}
.container.second:hover .sample_box_2 {
  transform: translate(100%, 100%);
}

<div class='container'>
  <div class='sample_box'></div>
</div>

<div class='container second'>
  <div class='sample_box_2'></div>
</div>