如何使用css实现过渡和动画（关键帧之间暂停的CSS关键帧动画）

地球围绕太阳运行，关键帧与关键帧之间暂停

你有没有想过如何在动画开始时暂停动画？

我们可以使用animation-delay属性但它只会延迟动画的开始，一旦动画开始它将持续动画。一旦CSS关键帧动画开始，除非我们使用javascript，否则我们无法暂停它。那么我们如何让动画在关键帧之间暂停呢？

解决方案是使关键帧具有相同的值和一些数学。（什么！？数学！？）是的，以便准确计时我们的关键帧。

布局动画

例如上面的图像，它动画为1秒，暂停2秒，迭代4次。

首先，我们需要获得动画的总时间。

总时间=（动画时间 动画暂停）*迭代次数

总时间 =（动画时间 动画暂停）迭代次数

总时间 =（1s 2s） 4

总时间 = 12s

---

计算动画关键帧的百分比（％）

动画时间（％）=（动画时间/总时间）* 100

动画暂停（％）=（动画暂停/总时间）* 100

动画时间（％） =（动画时间/总时间）* 100

动画时间（％） =（1/12）* 100

动画时间（％） = 8.33％（8.33％= 1s的时间）

动画暂停（％） =（动画暂停/总时间）* 100

动画暂停（％） =（2/12）* 100

动画暂停（％） = 16.67％（16.67％= 2s的时间）

---

初始化动画关键帧的百分比（％）值

我们现在将通过添加动画时间和动画暂停百分比来初始化百分比值，然后将其递增直到第4次迭代。

0%(0s) 8.33%(1s animate) = 8.33%(1s)

8.33%(1s) 16.67%(2s pause) = 25%(3s) [1st iteration]

25%(3s) 8.33%(1s animate) = 33.33%(4s)

33.33%(4s) 16.67%(2s pause) = 50%(6s) [2nd iteration]

50%(6s) 8.33%(1s animate) = 58.33%(7s)

58.33%(7s) 16.67%(2s pause) = 75%(9s) [3rd iteration]

75%(9s) 8.33%(1s animate) = 83.33%(10s)

83.33%(10s) 16.67%(2s pause) = 100%(12s) [4th iteration]

现在我们有，

0％→8.33％→25％→33.33％→50％→58.33％→75％→83.33％→100％

初始化动画关键帧的百分比（％）值

---

Lezz在行动中做到这一点

total time = 12s

animation time (%) = 8.33% (8.33% = 1s of the time)

animation pause (%) = 16.67% (16.67% = 2s of the time)*

动画关键帧的百分比0％→8.33％→25％→33.33％→50％→58.33％→75％→83.33％→100％

由于动画旋转360度，我们有4次迭代。

keyframe value = 360/4 = 90度

** 每次迭代我们有90度，为了在每次迭代中得到度，然后我们将它递增90度**。

0度 90度 = 90度[1次迭代]

90度 90度 = 180度[2次迭代]

180度 90度 = 270度[3次迭代]

270度 90度 = 360度[4次迭代]

现在我们有，

0度→90度→180度→270度→360度 [每次迭代]

现在我们已经拥有了所需的所有值，让我们将它添加到我们的代码中。

.planet{ animation: rotateEarth 12s infinite } @keyframes rotateEarth { 0% { transform: rotate(0deg) } 8.33% { transform: rotate(90deg) } 25% { transform: rotate(90deg) } 33.33% { transform: rotate(180deg) } 50% { transform: rotate(180deg) } 58.33% { transform: rotate(270deg) } 75% { transform: rotate(270deg) } 83.33% { transform: rotate(360deg) } 100% { transform: rotate(360deg) } }

正如您在上面的代码中看到的，有一些关键帧具有相同的值。我们可以用逗号分隔具有相同值的关键帧来编写更少的代码。

@keyframes rotateEarth { 0% { transform: rotate(0deg) } 8.33%, 25% { transform: rotate(90deg) } 33.33%, 50% { transform: rotate(180deg) } 58.33%, 75% { transform: rotate(270deg) } 83.33%, 100% { transform: rotate(360deg) } }

---

这就是全部。希望您能够在关键帧之间暂停创建动画。

感谢您抽出时间阅读我的文章。

希望本文能帮助您完成Web开发之旅。

译自：https://codeburst.io/css-keyframe-animation-with-pause-between-keyframes-50a3b3d14354

,