代码之家 › 专栏 › 技术社区 › godblessstrawberry

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

css-animations css-transitions css

godblessstrawberry · 技术社区 · 7 年前

我可以控制动画速度之间的转换吗?我试图通过增加更多的百分比来覆盖速度跳跃,但当速度改变时,它只会在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>

2 回复 | 直到 7 年前

chazsolo 7 年前

你可以用 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>

wlh 7 年前

这只是摆弄数字的问题。

我还对这些价值观做了一些尝试。你可以把它们放回你想要的位置,但我只是想看看如果第一秒是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>