理解CSS中的cubic-bezier过渡属性

Question

我有一个

元素，其中包含一些幻灯片和菜单。

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}

<div id="wrap"></div>

有人能解释一下这里的过渡属性是做什么用的吗？

我不理解它会对div产生什么效果。

- UnderTaker

---

这意味着，如果您更改div的“top”属性（无论是在JS还是CSS中），它将根据您的设置以动画过渡的方式发生变化。 - webkit

我发现MDN文档<easing-function>很有帮助。 - Jun Yu

Answer 1

为您解答

该属性用于动画

，意味着它将使用top属性进行动画！

关于Effect：它将像这个过渡效果一样弹跳。

---

理解CSS cubic-bezier

它需要四个参数：

cubic-bezier(P1x,P1y,P2x,P2y)

这些是干什么的？

这些对应一些点，这些点是贝塞尔曲线的一部分：

• 所以有4个点，但函数只提到了P1和P2及它们对应的X和Y值？

• 对于CSS贝塞尔曲线来说，P0和P3总是在同一个位置。P0在(0,0)，P3在(1,1)。重要的是注意传递给cubic-bezier函数的点只能在0到1之间。因此，如果您尝试像cubic-bezier(2,3,5,2)这样的东西，您将被放逐到线性缓动，这是所有缓动函数中最糟糕的缓动方式。这就像字体族回退到Comic Sans。

• 还要注意，x轴是动画所需的时间，y轴是正在更改的属性。根据上面的图表，您可以想象它在开始时快速缓动，在中间放慢速度，并在结束时加速。

---

---

有用的链接

• 此博客的答案来源

• 用于创建贝塞尔过渡效果

• 贝塞尔曲线生成器

• 理解曲线 - 数学

---

- Suresh Karia

---

实际上，只有P1和P2的横坐标需要在[0,1]范围内。 - Mati

Answer 2

我想提供另一种对于 cubic-bezier 函数的解释，这是一个刚刚理解它如何工作的人给出的。在学习 https://freecodecamp.org 的教程时，我遇到了一些困难。但是，在阅读了 eirenaios 给出的先前答案并使用 cubic-bezier builder 后，我掌握了它。

我的博客文章

1. Bezier 曲线基于四个点：P0、P1、P2 和 P3。默认情况下，P0 设为 (0, 0)，P3 设为 (1, 1)。

2. 曲线根据您为点 P1 和 P2 给定的坐标而拉伸不同。

    cubic-bezier 示例

在上面的示例中，P1 设为 (0.1, 0.1)，P2 设为 (1, 0)。动画的速度取决于每个给定时间内状态的变化量。在此示例中，动画会随着时间的推移变得越来越快。在用于动画的时间的前半段，它将覆盖约 15% 的距离（当时间 = 0.5 时，状态 ~ 0.15）。在后半段中，它将覆盖剩余的 85% 距离。

请查看 jsfiddle 中的示例，以了解动画如何实际工作：cubic-bezier 球形动画

HTML：

<div class="ball"></div>

CSS：

.ball{
  background: red;
  border-radius: 50%;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  animation-name: bounce;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.10, .10, 1, 0);
}

@keyframes bounce {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

在这个例子中，球在4秒的时间内从屏幕左边移动到右边。关键帧用于设置动画的起始和结束位置，animation-timing-function: cubic-bezier() 用于设置不同时间点上动画的速度。

- Tomasz Makowski