cubic-bezier() 函数如何工作？

Question

我目前正在尝试学习如何使用 cubic-bezier()，但我有点吃力。

据我了解，它有助于创建由 4 个点组成的贝塞尔曲线，比方说 P0、p1、p2、p3。

p0和p3的坐标分别为(0, 0)(1, 1)，分别代表曲线的起点和终点

X代表时间，Y代表进度。

所以如果我的函数看起来像

transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);

我的动画不应该在过渡时间的 7/10 之前真的很慢（所以在过渡时间的 7/10 时我得到 0.2 的进度）并且在其余时间非常快吗？（所以从 7/10 -> 10/10 的时间部分应该有 0.8 的动画 - 所以它应该非常快）

这就是我认为它有效但实际上无效的方式。这是我的代码

.transitionTest {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 100px 0 0 100px;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.7, 0.2, 1, 1);
}

.transitionTest:hover {
    transform: rotate(180deg);
    background-color: red;
    width: 100px;
    height: 100px;
}

<div class="transitionTest"></div>

此外，如果我在此函数中使用负值会怎样？

Answer 1

shouldn't my animation be really slow until 7/10 of the transition-time (so at 7/10 of the transition-time I get 0.2 of the progression) and very fast for the rest of the time?

不一定，因为点不会定义计算但会定义曲线，然后您需要考虑曲线来找到级数。这是您将获得的贝塞尔曲线：

黑色曲线是你的动画，刚开始会有点慢。在大约 70% 的时间，您将到达动画的 50%，而另一个 50% 将从 70% 到 100%。

为了得到你想要的东西（20% 在 70%），你需要像下面这样的东西

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0.6, 0.05, 1, 0.2);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>

当然，这并不是获得预期效果的唯一组合。有很多组合可以获得。

有关计算的更多详细信息的相关问题：

一个有用的在线工具来绘制曲线并轻松了解正在发生的事情：https://www.desmos.com/calculator/d1ofwre0fr?lang=fr

另一个：https://cubic-bezier.com/

Also, what happens if I use negative values in this function?

没什么特别的。您的点将在区域 (0,0) (1,1) 之外，我们以相同的方式绘制曲线。示例：

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  margin: 100px 0 0 100px;
  transition-property: all;
  transition-duration: 2s;
  transition-timing-function: cubic-bezier(0, 0, 0, -1);
}

.box:hover {
  transform: rotate(180deg);
  background-color: red;
  width: 100px;
  height: 100px;
}

<div class="box"></div>

cubic-bezier() 函数如何工作？

How does the cubic-bezier() function work?

css

css-transitions