Question

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

＆＃13;

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

＆＃13;

img {
  width: 100px;
  height: 100px;
}

.imageRotateHorizontal{
    animation: spinHorizontal 1.8s linear;
}

@keyframes spinHorizontal {
	0% { 
        transform: rotateY(0deg); 
	}
    100% {
        transform: rotateY(360deg);
    }
}

＆＃13;

Answer 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>

CSS：每30秒重复一次动画

1 个答案: