關鍵幀在Safari和Chrome中不起作用

Question

任何人都可以告訴我我需要做什麼才能讓我的CSS滑塊在Safari和Chrome上運行嗎？

它在Firefox和Opera中正常工作 - 尚未在IE中測試過。

任何幫助，非常感謝

勞倫

@keyframes slidy { 
20% { left: 0%; } 
25% { left: -100%; } 
45% { left: -100%; } 
50% { left: -200%; } 
70% { left: -200%; } 
75% { left: -300%; } 
95% { left: -300%; } 
100% { left: -400%; } 
} 



figure { position: absolute; width: 500%; 
margin: 0; top: 0; left: 0; 
animation: 20s slidy ease-in-out infinite; } 

Answer 1

這不是真的那麼iOS不支持動畫，它是從WebKit的一個bug。他們solved it in January由於Chrome的快速更新，現在它在Chrome中運行，但Safari瀏覽器不支持，也不支持移動版和桌面版。

Answer 2

要在基於Webkit的瀏覽器上使用@Keyframes動畫，您必須輸入供應商特定的前綴，在這種情況下爲@-webkit-keyframes和-webkit-animation。

您應該始終指定它們中的全部：-moz，-webkit，-o，以及一個特定的級聯順序中的直線。

瞭解更多關於Keyframe Animation Syntax。