Question

嗨，我正在尝试在本地和jsfiddle上复制此代码。除了动画外，其他任何工作都可以。有人可以指出这里缺少什么，所以动画也有效吗？

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

我认为它与动画属性

有关

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

由于

Answer 1

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

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 ); }
}

CSS3动画不在本地工作

2 个答案: