如何使用三次贝塞尔曲线来改变关键帧动画的速度？

Question

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

我找到了answer 来回答我的问题，唯一的问题是我真的不明白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);

这是因为实际上有两个标记（或起点）。

前两个值是从框的左下角的起点获取的，其值为(0,0)。当您将标记移到 right 时，第一个值会发生变化，例如 (0.755, 0.000)。当您将标记 向上 移动时，第二个值会发生变化，例如（0.755，0.050）。

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

值 1 和 3（左和右）控制时间，值 2 和 4（上和下）控制动画。

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

我已经包含了一个图表（它没有显示与上面示例相同的值）但应该有助于理解上面的信息。