CSS：每30秒重复动画

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

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

 
.imageRotateHorizontal{ 
 
    animation: spinHorizontal 1.8s linear; 
 
} 
 

 
@keyframes spinHorizontal { 
 
\t 0% { 
 
     transform: rotateY(0deg); 
 
\t } 
 
    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>

来源

2016-03-03 Kicker

[如何重新触发通过JavaScript WebKit的CSS动画？（可能的重复http://stackoverflow.com/questions/4797675/how-do-i-re -trigger-a-webkit-css-animation-via-javascript） – apokryfos

http://stackoverflow.com/questions/32223835/repeat-animation-every-3-seconds/32223950?s=1|4.0584#32223950 – Harry

你可以这样做，在这里你将它设置为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>

来源

2016-03-03 17:26:39 LGSon

CSS：每30秒重复动画

回答

相关问题