css - 如何使用 cubic-bezier 改变关键帧动画的速度？

Question

我正在尝试创建一个 @keyframe 动画来将一个框从屏幕底部拉起，然后让它从 HTML 文档正文的顶部弹回。我用来执行此操作的方法不允许您在动画持续期间更改速度，实习生不会使它看起来非常逼真(请参见下面的代码)。

我找到了一个 answer对于我的问题，唯一的问题是我真的不明白 cubic-bezier 是如何创建动画的。在我继续并将其放入我的元素之前，我想弄清楚代码在做什么。所以，是的，我想这个问题的标题不应该是“如何使用 cubic-bezier 来改变关键帧动画的速度？”，而是“cubic-bezier 是如何工作的以及它在 this 实例中是如何工作的”。如果有人能稍微解释一下，甚至给我一个简单的代码示例以供遵循和理解，我将不胜感激。

注意:我看过Mozila Developer Network在这个属性上，但仍然不完全理解它是如何在 @keyframe 动画中或之外工作的。

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('#square').className = 'bounce';
  document.querySelector('#square').style.display = 'block';
});
document.querySelector('#square').addEventListener('animationend', function(e) {
  if (e.animationName == 'animate-in') {
    document.querySelector('#square').removeAttribute('class');
  }
});

#button {
  display: block;
  position: absolute;
  left: 75px;
}

#square {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  background-color: tomato;
  animation-fill-mode: forwards;
}

.bounce {
  animation: animate-in 1.5s;
}

@keyframes animate-in {
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
  0% {
    transform: translateY(100vh);
  }
}

<input type="button" id="button" value="Run Animation">
<div id="square"></div>

Answer 1

你可以通过玩这里的盒子找到https://matthewlein.com/ceaser/您对三次贝塞尔曲线有很好的理解。

想象一个盒子。如果您将标记放在:
框的左下角，它的值为 (0)
框的右上角，它的值为 (1)

但三次贝塞尔曲线有 4 个值，例如......
立方贝塞尔 (0.755, 0.050, 0.855, 0.060);

那是因为实际上有两个标记(或起点)。

前两个值是从盒子的左下 Angular 开始得到的，其值为(0,0)。当您将标记移到右边时，第一个值会发生变化，例如(0.755，0.000)。当您向上移动标记时，第二个值会发生变化，例如(0.755，0.050)。

后两个值由一个框的右上起点得到，其值为(1,1)。当您将标记移到左边时，第三个值会发生变化，例如(0.855，1.000)。当您向下移动标记时，第四个值会发生变化，例如(0.855，0.060)。

值一和三(左和右)控制时间，值二和四(上和下)控制动画。

将这些值放在一起得到 (0.755, 0.050, 0.855, 0.060);

我附上了一张图表(它没有显示与上面示例相同的值)但应该有助于理解上面的信息。