                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /JS+CSS3实现“粽情端午”

keyframes + animation没有效果

@-webkit-keyframes change{

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

}

.text{width:400px;height:400px;background:url('./img/zz.png') no-repeat;position:absolute;top:200px;left:500px;}

.change{-webkit-animation: change 2s infinite;}

这段代码怎么没有效果？（用的360浏览器，webkit内核）？

黄昏丶如果选择

2015-06-27

源自：JS+CSS3实现“粽情端午” 2-4

关注问题我要回答

4160

操作

收起

3 回答

Rongdd
2015-07-04

把代码改为

@-webkit-keyframes rotateplane {

0%{ -webkit-transform:rotate(0deg) }

10%{-webkit-transform:rotate(3deg)}

20%{-webkit-transform:rotate(-3deg)}

30%{-webkit-transform:rotate(2deg)}

40%{-webkit-transform:rotate(-2deg)}

50%{-webkit-transform:rotate(1deg)}

60%{-webkit-transform:rotate(-1deg)}

70%{-webkit-transform:rotate(0deg)}

100%{-webkit-transform:rotate(0deg)}

}

0 回复有任何疑惑可以回复我~

收起回答

黄昏丶如果选择提问者

原来如此，里面还要做下兼容，谢谢啦！

2015-07-12 回复有任何疑惑可以回复我~

qq_浅秋_04051456 回复黄昏丶如果选择提问者

你加上-webkit-就好了嘛？我的怎么不行

2017-04-25 回复有任何疑惑可以回复我~

琦琦小
2015-07-22

我试了下，谷歌浏览器就可以晃动，但是火狐浏览器没这个晃动

0 回复有任何疑惑可以回复我~

收起回答

阿阿金

火狐的厂商前缀是-moz-

2018-10-17 回复有任何疑惑可以回复我~

Kodo
2015-06-28

目测代码没问题

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

JS+CSS3实现“粽情端午”

参与学习 39505 人
解答问题 74 个

用JS和CSS3技术实现3D效果粽子特效动画，掌握动画制作过程

进入课程

本课相似问答

4 回答没有抖动的效果，我试了很多次了。

1 回答那标题文字怎么没有过度效果，帮看看

1 回答效果不错哦

3 回答效果不出来

1 回答在chrome浏览器，没有祝福语出现的动画效果，transition：all 1s 0.5s不起作用

搜索更多本课相关问答

keyframes + animation没有效果

我要回答关注问题

热搜

最近搜索清空

keyframes + animation没有效果

3 回答

本课相似问答

keyframes + animation没有效果