“transition-timing-function:cubic-bezier();”如何物业工程

Question

谁能解释一下“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 部分作为“立方贝塞尔”值，但我的盒子发疯了，当在两个方向上悬停时它会完全超出屏幕

Answer 1

您需要一点数学背景才能真正深入了解cubic-bezier 函数，因为该函数定义了cubic-bezier curve 的控制点。我不是数学专家，所以只能澄清它的 CSS 部分。如果您确实需要有关如何绘制三次贝塞尔曲线的详细信息，请等待看看您是否在此处获得更好的答案（或）尝试在数学 SE 网站上询问更适合该问题的网站。

三次贝塞尔曲线是基于四个点 P0、P1、P2 和 P3 绘制的曲线。这里的点 P0 和 P3 是曲线的起点和终点，而 P1 和 P2 是定义曲线曲率的控制点。

提供给cubic-bezier 计时函数的四个输入值指定三次贝塞尔曲线 (for the curve used by CSS, the points P0 and P3 are always (0,0) and (1,1) respectively) 的控制点 P1 和 P2 的坐标。根据绘制的曲线（使用输入值），UA 将确定过渡或动画在任何给定时间点必须完成的进度量。

与specified in the W3C Specs 一样，x（参数 1 和 3）的值应始终介于 0 -1 之间，而 y（参数 1 和 4）的值可以超出此范围。以下是摘录：

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

有关如何根据输入值绘制曲线以及如何显示任何给定时间点的进度的现场演示，您可以参考此great page created by 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>