Rongdd
2015-07-04 12:57
@-webkit-keyframes rock{
0%{ transform:rotate(0deg) }
10%{transform:rotate(3deg)}
20%{transform:rotate(-3deg)}
30%{transform:rotate(2deg)}
40%{transform:rotate(-2deg)}
50%{transform:rotate(1deg)}
60%{transform:rotate(-1deg)}
70%{transform:rotate(0deg)}
100%{transform:rotate(0deg)}
}
.c_zhongzi_box_rock{
-webkit-animation:rock 2s infinite;
}
<div class="c_zongzi_box c_zhongzi_box_rock">
没有效果,什么问题?
在-webkit-内核浏览器下所有的transform需要加上-webkit-
同时其他内核浏览器的特殊前缀也都要加上,如
-ms-
-o-
-moz-
下面代码中都添加上-webkit-(解决google兼容问题,在google测试试一下):-webkit-transform:rotate(0deg)
{ 0%{ transform:rotate(0deg) }
10%{transform:rotate(3deg)}
20%{transform:rotate(-3deg)}
30%{transform:rotate(2deg)}
40%{transform:rotate(-2deg)}
50%{transform:rotate(1deg)}
60%{transform:rotate(-1deg)}
70%{transform:rotate(0deg)}
100%{transform:rotate(0deg)}
}
可能是浏览器不兼容吧
+1 我也没动画。。。
JS+CSS3实现“粽情端午”
39504 学习 · 74 问题
相似问题