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