css动画属性中旋转

CSS动画播放不回来

在我们使用CSS动画的过程中，有时候会遇到动画播放不回来的情况，这种情况主要有以下几种原因：
1.动画播放完成后没有设置回到原始状态
如果我们没有设置动画回到原始状态，那么动画结束后元素就会保持在最后一帧的状态，无法恢复到原来的状态。
2.动画的关键帧设置不正确
如果我们关键帧的时间间隔没有设置好，那么就会出现动画播放一遍完后立马回到第一帧重新播放的情况。
3.动画循环次数设置问题
我们可以设置动画循环的次数，当次数到达后元素就会停留在最后一帧的状态，如果我们没有设置循环次数，那么动画就只会播放一次。

如何解决

1.设置动画回到原始状态
我们可以使用animation-fill-mode属性来设置动画完成后返回到原始状态。例如：animation-fill-mode: forwards;就会让动画在最后一帧停留。
2.检查关键帧的时间设置
我们在设置关键帧时，需要注意时间间隔的设置，动画的时间间隔决定了动画的播放速度，如果时间设置不对，就会出现播放不回来的情况。
3.正确设置动画循环次数
我们可以使用animation-iteration-count属性来设置动画循环的次数，例如：animation-iteration-count: 2;就会让动画循环播放2次。

总结

使用CSS动画的时候，我们需要注意动画的设置，要合理设置动画的回到原始状态、关键帧时间间隔和动画循环次数。只有设置得当，动画才能播放得流畅、回来得自然。