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

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

我可以控制动画速度之间的转换吗？我试图通过增加更多的百分比来覆盖速度跳跃，但当速度改变时，它只会在20%后提供第二次跳跃

html{
身高：100%；
}
身体{
身高：100%；
背景：#333；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.酒吧{
背景：青色；
宽度：100px；
高度：10px；
}
.酒吧{
动画：旋转10s线性无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
10% {
变换：旋转（1600度）；
}
11% {
变换：旋转（1620度）；
}
12% {
变换：旋转（1640度）；
}
13% {
变换：旋转（1660度）；
}
14% {
变换：旋转（1680度）；
}
15% {
变换：旋转（1700度）；
}
16% {
变换：旋转（1720度）；
}
17% {
变换：旋转（1740度）；
}
18% {
变换：旋转（1760度）；
}
19% {
变换：旋转（1800度）；
}
20% {
变换：旋转（1820度）；
}
100% {
变换：旋转（2160度）；
}
}

---

这只是摆弄数字的问题

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

之所以会有很大的跳跃，是因为你试图控制10到20之间的每一个中间步骤，但动画必须在20%的某一点上。让浏览器控制10%到20%之间的所有内容，因为您希望平稳减速。计时功能会考虑到您从何处开始以及希望在何处结束，因此它会尝试为您平滑所有事情。每一个百分点定义得越多，动画就会越僵硬

我还对这些价值观做了一些尝试。你可以把它们放回你想要的位置，但我只是想看看如果第一秒是5个旋转，第二秒是1个旋转，最后80%是一个旋转，它会对动画产生什么影响。它似乎与我成正比，动画看起来更流畅。但是，我建议玩学位游戏，直到你得到你想要的

html{
身高：100%；
}
身体{
身高：100%；
背景：#333；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.酒吧{
背景：青色；
宽度：100px；
高度：10px；
}
.酒吧{
动画：旋转10s线性无限；
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
10% {
变换：旋转（1800度）；
}
20% {
变换：旋转（2160度）；
}
100% {
变换：旋转（2520度）；
}
}

您可以使用：一个用于带减速的初始旋转（看看。在这种情况下，我使用的是模拟基本减速的

放松
），第二个（延迟到第一次完成后运行）是线性的。您必须使用度数和持续时间的值进行播放，以使第一个动画的旋转速度与第二个动画的线性速度相匹配，否则您将看到速度快速跳跃（首先是您的问题）。下面是一个例子：


html{
身高：100%；
}
身体{
身高：100%；
背景：#333；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.酒吧{
背景：青色；
宽度：100px；
高度：10px；
}
.酒吧{
动画：旋转减速2秒放松，旋转线性2秒线性2秒无限；
}
@关键帧旋转减速{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（2160度）；
}
}
@关键帧旋转线性{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}