css旋转45度_关键帧之间暂停的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