关于css3动画在chrome浏览器内失效的问题

2016/5/24镜像同步13 回复

【更新】虽然不太明白但是找到原因了、、、我的图片使用了字库里的一个icon，然后放在了<i>标签中，i标签添加positon：absolute；之后动画可以生效奇怪为什么搜狗浏览器里一直都有效，没影响。。 <div class="icon"> <i class="sun"></i> //这个i标签必须添加position：absolute才能运行动画 <i class="cloud"></i> </div> 。。 ------------------------------------------------------------------------------ 用@keyframes写了一个旋转的动画如下： @keyframes rotate { from {-webkit-transform: rotate(0deg); transform:rotate(0deg);} to {-webkit-transform: rotate(360deg); transform:rotate(360deg);} } （同时也写了@-webkit-keyframes rotate 和上面一样略）然后对一个叫太阳的类使用了这个魔法哦不动画.sun{animation:rotate 3s linear 0s infinite normal;} 同样也写了-webkit-animation:rotate 3s linear 0s infinite normal; 然后..太阳在chrome浏览器下怎么都不会转。。。在搜狗浏览器下可以转。。。第一次遇到兼容性问题，搜索了一下也都是通过@-webkit-这种兼容性写法解决。。然而动画还是没有生效，所以来问一下遇到这种问题，有什么好的解决方法吗。。。（太阳的icon是通过.sun:before{content:"\f00d";}挂上去的。。。加载的网上的eot )

订阅后，新回复会通过你的通知中心匿名送达。

9 条回复

PiEgg机器人#1 · 2016/5/24

chromeF12开发者工具看看CSS代码被如何执行了吧

e97ace机器人#2 · 2016/5/24

不懂帮顶. 另外建议楼主把代码贴到jsfiddle或者codepen方便大家看. ———— 微博 @flowmemo 现在主要写JavaScript. 关注广泛, 欢迎交流.

h452114240机器人#3 · 2016/5/24

http://jsbin.com/biwejayuke/edit?html,css,output 这样写一点问题都没有的说~ 不懂帮顶

guoxu1017机器人#4 · 2016/5/25

[ema0]好像没问题？不懂帮顶

dcy0701机器人#5 · 2016/5/25

搜狗浏览器也是chrome blink内核

stevesasuke机器人#6 · 2016/5/25

赞一个~，lz你说那么多还不如上个demo... show us the code... 【在 h452114240 的大作中提到: 】 : http://jsbin.com/biwejayuke/edit?html,css,output : 这样写一点问题都没有的说~ : 不懂帮顶

matsunatsuri机器人#7 · 2016/5/25

【在 stevesasuke 的大作中提到: 】 : 赞一个~，lz你说那么多还不如上个demo... : show us the code... : 刚开始学，还没上传到过楼上提到的codeopen之类的网站。。下午我看看怎么用。

liu907030机器人#8 · 2016/5/25

3楼的写的很好，这个应该不会有什么问题的，但是要提醒一点，如果用在移动设备上，有些机型的浏览器内核并不支持伪元素的CSS3动画

matsunatsuri机器人#9 · 2016/5/25

【在 h452114240 的大作中提到: 】 : http://jsbin.com/biwejayuke/edit?html,css,output : 这样写一点问题都没有的说~ : 不懂帮顶我把代码copy到这个网站。。也可以运行。。用自己的chrome浏览器测试就不行。。搜狗浏览器可以唯一的区别是，带这个动画效果的页面，是用ajax从别的页面load过来的。。