CSS: repeat animation every 30 seconds

Question

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

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>

Possible duplicate of [How do I re-trigger a WebKit CSS animation via JavaScript?](http://stackoverflow.com/questions/4797675/how-do-i-re-trigger-a-webkit-css-animation-via-javascript) — apokryfos, Mar 03 '16 at 17:26
Possible duplicate of http://stackoverflow.com/questions/32223835/repeat-animation-every-3-seconds/32223950?s=1|4.0584#32223950 — Harry, Mar 04 '16 at 06:26

Asons · Accepted Answer · 2016-03-03T17:31:58.100

You can do like this, where you set it to infinite, make it a 30 sec animation but do the full spin at the first 5% of the 30 sec.

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: repeat animation every 30 seconds

1 Answers1

Linked