css - CSS3动画在本地不起作用

Question

嗨，我正在尝试在本地和 jsfiddle 上复制此代码。除动画外，一切正常。有人可以指出这里缺少什么以便动画也能正常工作吗？

原文： http ://codepen.io/pixelgrid/pen/suflz

jsfiddle http://jsfiddle.net/FeZq9/

我相信它与动画属性有关

@keyframes round{ 100%{ transform:rotate( 360deg ); } }
animation:round 9s linear infinite;

谢谢

Answer 1

尝试使用其他浏览器，如 Firefox 或 Oopera

Answer 2

检查这个没有错，只需为所有动画属性添加浏览器前缀。codepen 自己做。

http://jsfiddle.net/FeZq9/1/

.cloud {
transform-origin:50% 400px;
  -webkit-transform-origin:50% 400px;
  -moz-transform-origin:50% 400px;
  -o-transform-origin:50% 400px;
  animation:round 7s linear infinite;
    -webkit-animation:round 7s linear infinite;
    -moz-animation:round 7s linear infinite;
    -o-animation:round 7s linear infinite;
}

@-webkit-keyframes round {
100%{ -webkit-transform:rotate( 360deg ); }
}

 @-moz-keyframes round { 
100%{ -moz-transform:rotate( 360deg ); }
}

 @-o-keyframes round { 

100%{ -o-transform:rotate( 360deg ); }
}
 @keyframes round { 
100%{ transform:rotate( 360deg ); }
}