如何避免 css 动画中速度之间的急剧跳跃

Question

我需要创建无限动画，以快速旋转（例如 1 秒）开始，然后逐渐减速（在另一个内，例如 1 秒内），然后以非常慢的速度继续（剩余的，例如 8 秒）。问题是 - 旋转速度变化非常急剧 - 在 10% 和 20%。

我可以控制动画速度之间的过渡吗？我试图通过添加更多百分比来覆盖速度跳跃，但当速度变化时，它只会在 20% 之后给出第二次跳跃。

html {
height: 100%;
}
body {
  height: 100%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar {
  background: cyan;
  width: 100px;
  height: 10px;
}

.bar {
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(1600deg);
  }
  11% {
    transform: rotate(1620deg);
  }
  12% {
    transform: rotate(1640deg);
  }
  13% {
    transform: rotate(1660deg);
  }
  14% {
    transform: rotate(1680deg);
  }
  15% {
    transform: rotate(1700deg);
  }
  16% {
    transform: rotate(1720deg);
  }
  17% {
    transform: rotate(1740deg);
  }
  18% {
    transform: rotate(1760deg);
  }
  19% {
    transform: rotate(1800deg);
  }
  20% {
    transform: rotate(1820deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}

<div class="bar"></div>

Answer 1

摆弄数字而已。

我删除了 10% 到 20% 之间的所有中间转换。动画根据计时函数和两点之间的排序计算元素的位置。

你跳得很大的原因是你试图控制 10 到 20 之间的每个中间步骤，但动画必须在 20% 的某个点。让浏览器控制 10% 到 20% 之间的所有内容，因为您想要平稳减速。计时功能会考虑您的起点和终点，因此它会尽力为您解决所有问题。每一个百分点越明确，动画就越生硬。

我也稍微调整了一下这些值。你可以按照你想要的方式把它们放回去，但我只是想看看如果第一秒是 5 圈，然后下一秒是 1 圈，最后 80% 是一圈，它会如何影响动画。它似乎与我成正比，动画看起来更流畅。但是，我建议您先玩度数，直到获得您想要的为止。

html {
height: 100%;
}
body {
  height: 100%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar {
  background: cyan;
  width: 100px;
  height: 10px;
}

.bar {
  animation: rotation 10s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(1800deg);
  }
  
  20% {
    transform: rotate(2160deg);
  }
  100% {
    transform: rotate(2520deg);
  }
}

<div class="bar"></div>

Answer 2

您可以使用 multiple animations: one for the initial spin with deceleration (take a look at the easing functions。在这种情况下，我使用 ease-out 模拟基本减速）和第二个（在第一次完成后延迟到运行）是线性的。您必须调整度数和持续时间的值，以使第一个动画的旋转速度与第二个动画的线性速度相匹配，否则您会看到速度快速跳跃（首先是您的问题）。这是一个例子：

html {
height: 100%;
}
body {
  height: 100%;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bar {
  background: cyan;
  width: 100px;
  height: 10px;
}

.bar {
  animation: rotationDecelerate 2s ease-out, rotationLinear 2s linear 2s infinite;
}

@keyframes rotationDecelerate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}

@keyframes rotationLinear {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<div class="bar"></div>

如何避免 css 动画中速度之间的急剧跳跃

How to avoid sharp jumps between speeds in css animation

css

css-transitions

css-animations