如何調整CSS動畫的時間？

我有下面的CSS做旋轉和淡入，它工作得很好。旋轉/淡入淡出的時間就像我想要的那樣，但我想要在旋轉/淡入之間延長一段時間 - 比如30秒左右。如果我增加持續時間，則會減慢旋轉/褪色過度。如何設置關鍵幀以保留旋轉/旋轉時間，但在旋轉/淡入之間允許30秒？我搜索了但找不到適用的答案。非常感謝你。如何調整CSS動畫的時間？

@-webkit-keyframes SomeName { 
0% { opacity:0; -webkit-transform: rotateY(180deg); } 
50% { opacity:0; -webkit-transform: rotateY(180deg); } 
75% { opacity:1; -webkit-transform: rotateY(0deg); } 
100% { opacity:1; -webkit-transform: rotateY(0deg); } 
} 

#flipBox img.flippy { 
-webkit-animation-name: SomeName; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-duration: 10s; 
-webkit-animation-direction: alternate; 
}

p.s.僅供參考：這只是webkit，因此是唯一的前綴。

來源

2013-03-12 user2161038

這裏有一個方便的參考：http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/ – 2013-03-12 13:11:39

謝謝，比利。 – user2161038 2013-03-12 13:56:38

似乎沒有簡單的解決方案。是否有任何要求來動態更改持續時間？如果不是，可以調整'@ keyframes'中的百分比是最簡單的方法。 – rhgb 2013-03-12 15:11:52

Live Demo

使用此代碼

animation:SomeName 5s; 
-moz-animation:SomeName 5s; /* Firefox */ 
-webkit-animation:SomeName 5s; /* Safari and Chrome */ 
-o-animation:SomeName 5s; /* Opera */

希望這會幫助你。

來源

2013-03-12 13:27:14

感謝您的意見，Sandeep。但我沒有問題，讓我的示例以相同的比例工作，正如您在演示中用顏色顯示的那樣 - 但我希望淡入淡出/旋轉花費10秒，然後在30秒之後再循環。我可以增加持續時間 - 但淡化/旋轉速度不會保持不變。 – user2161038 2013-03-12 13:56:00

如何調整CSS動畫的時間？

回答

相關問題