24

我有一个 div，其中包含一些幻灯片和菜单。

#wrap {
    position: relative;
    top: 0;
    transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
}
<div id="wrap"></div>

谁能向我解释一下过渡属性在这里的作用？

我无法理解它将对 div 产生的影响。

4

2 回答 2

49

回答你的问题

该属性用于<div id="wrap"></div>.

这意味着它将使用顶级属性进行动画处理！

而对于效果：它会像这样弹跳这将是过渡效果

理解 CSS 三次贝塞尔曲线

它需要四个参数：

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

积分 立方B

这些是做什么的？

好吧，这些映射到点，这些点是贝塞尔曲线的一部分：

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

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

  • 另请注意，x 轴是动画所花费的时间，y 轴是正在更改的属性。根据上图，您可以想象它在开始时快速放松，在中间减速，最后加快速度。

有用的网址

于 2014-08-26T09:03:25.153 回答
4

我想由刚刚了解它如何工作的人提供对三次贝塞尔函数的另一种解释。在浏览https://freecodecamp.org上的教程时，我遇到了一些麻烦 。在阅读了eirenaios的上一个答案并使用了三次贝塞尔生成器后，我掌握了它。

发表在我的博客上

  1. 贝塞尔曲线基于四个点：P0、P1、P2 和 P3。P0 默认设置为 (0, 0)，P3 默认设置为 (1, 1)。

  2. 根据您为点 P1 和 P2 指定的坐标，曲线的拉伸方式会有所不同。

     三次贝塞尔曲线示例

在上面的示例中，P1 设置为 (0.1, 0.1)，P2 设置为 (1, 0)。动画的速度取决于每给定时间状态改变多少。在此示例中，动画会随着时间的推移而变得更快。对于动画使用的前半段时间，它将覆盖大约 15% 的距离（当 Time = 0.5，State ~ 0.15 时）。它将在下半场覆盖剩下的85%的距离。 

请查看 jsfiddle 中的示例以了解动画在实践中的工作原理：cubic-bezier ball animation

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() 用于设置动画在不同时间点的速度。

于 2018-12-27T20:34:16.633 回答