CSS：每 30 秒重复一次动画答案

【问题标题】：CSS: repeat animation every 30 secondsCSS：每 30 秒重复一次动画
【发布时间】：2016-03-04 01:31:58
【问题描述】：

我有一个硬币动画，但我需要每 30 秒重复一次这个动画，可以吗？谢谢。

img {
  width: 100px;
  height: 100px;
}

.imageRotateHorizontal{
    animation: spinHorizontal 1.8s linear;
}

@keyframes spinHorizontal {
	0% { 
        transform: rotateY(0deg); 
	}
    100% {
        transform: rotateY(360deg);
    }
}

<div style="width: 200px">
        <img id='imageLoading' class='imageRotateHorizontal' src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Gold_coin_icon.png" />
<div>

【问题讨论】：

How do I re-trigger a WebKit CSS animation via JavaScript?的可能重复
stackoverflow.com/questions/32223835/…的可能重复

标签： css

【解决方案1】：

您可以这样做，将其设置为 infinite，将其设为 30 秒动画，但在 30 秒的前 5% 进行完整旋转。

img {
  width: 100px;
  height: 100px;
}

.imageRotateHorizontal{
  animation: spinHorizontal 30s linear infinite;
}

@keyframes spinHorizontal {
  0% { 
    transform: rotateY(0deg); 
  }
  5% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div style="width: 200px">
  <img id='imageLoading' class='imageRotateHorizontal' src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Gold_coin_icon.png" />
</div>

【讨论】：