CSS: repeat the animation every 30 seconds.

Question

I have a coin, but I need to repeat this animation every 30 seconds, is this possible? Thank.

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>

Run codeHide result

Answer 1

You can do this when you set it to infinite, make it a 30 second animation, but do a full spin for the first 5% of 30 seconds.

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>

Run codeHide result