关于CSS3的animation使用的一些坑,需要注意下!

CSS3的animation实在是让人爱不释手,越用越觉得离不开了。较高的性能以及和js的逻辑无关性,可以专注于动画效果本身,真的很不错,尤其在手机上,只需主要考虑webkit内核的,更是爽,但随着使用,也发现一些坑,就分享给大家吧。

关于CSS3的animation使用的一些坑,需要注意下!

1. 对于一个要显示动画的元素,一定要先show,然后在执行动画语句。在iPhone设备上如果先执行动画语句再显示元素,则动画可能无效,android则没问题。

2. 有时候我们执行动画语句的时候发现第一次并不生效,但是执行过一次,再次执行就好了。此问题只会在移动上出现,PC端则ok。解决办法就是设置animation-delay,一般0.2s就ok了。至于深层次的原因不得而知,猜测可能是因为移动毕竟渲染性能不如PC端,估计有时候元素还没有完全就绪吧。

3. 使用-webkit-transition的时候,有些个别的浏览器版本可能会出现闪烁的情况,很坑爹。网上搜到的解决方案:
-webkit-backface-visibility: hidden;(设置进行转换的元素的背面在面对用户时是否可见:隐藏)
-webkit-transform-style: preserve-3d; (设置内嵌的元素在 3D 空间如何呈现:保留 3D )。

4. Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。

相关阅读