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

您可以使用multiple animations：一个用于减速的初始旋转（请看一下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>

Answer 2

这只是摆弄数字的问题。

我删除了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>

如何避免CSS动画中速度之间的急剧跳变

2 个答案: