CSS:每30秒重复一次动画

时间:2016-03-03 17:21:37

标签: css

我有一个硬币动画,但我需要每30秒重复一次这个动画,这可能吗?感谢。



if (flock($file,LOCK_EX)){
  fwrite($file,"Write something");
  flock($file,LOCK_UN);
} else {
  echo "Error locking file!";
}

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

.imageRotateHorizontal{
    animation: spinHorizontal 1.8s linear;
}

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




1 个答案:

答案 0 :(得分:5)

您可以这样做,将其设置为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>