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个部分作为“cubic-bezier”值，但我的盒子变得疯狂，当它向两个方向悬停时它完全脱离屏幕

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>

“transition-timing-function：cubic-bezier（）;”财产工作

1 个答案: