Question

我有一个小动画，可以在这里看到 http://jsfiddle.net/LcvS4/1/

这个是使用@keyframes

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

这在Firefox中很有用，但在Chrome中不起作用。我还没弄明白为什么。有人可以帮忙吗？

由于

Answer 1

您需要使用-webkit-供应商前缀

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

您还需要将它添加到任何动画属性中（以及保留那些没有它以便在其他浏览器中支持的动画），例如：

-webkit-animation-name:move;

CSS供应商前缀或CSS浏览器前缀是浏览器的一种方式制造商在某种测试中添加对新CSS功能的支持实验期。浏览器前缀用于添加新功能这可能不是正式规范和实施的一部分规范中尚未最终确定的功能。