CSS 3關鍵幀動畫並沒有在Chrome

Question

工作，我有一個小動畫，可以在這裏使用@keyframes

@keyframes move { 
    0% { 
     left: 0%; 
    } 
    100% { 
     left: 100%; 
    } 
} 

這在Firefox的偉大工程中可以看出 http://jsfiddle.net/LcvS4/1/

這一項，但沒有按在Chrome中不起作用。我還沒有弄清楚爲什麼。任何人都可以幫忙

感謝

Answer 1

您需要使用-webkit-供應商名稱

@-webkit-keyframes move { 
    0% { 
     left: 0%; 
    } 
    100% { 
     left: 100%; 
    } 
} 

你還需要將它添加到任何動畫屬性（以及保持那些沒有它在其他瀏覽器支持）如：

-webkit-animation-name:move;

More on vendor prefixes:

CSS供應商前綴或CSS瀏覽器前綴是瀏覽器 製造商在某種測試和 試驗期間添加對新CSS功能的支持的一種方式。瀏覽器前綴用於添加可能不是正式規範一部分的新功能 ，並且在尚未最終確定的規範中實施 功能。

The MDN article on animation is also a good read