animation动画不生效_关于CSS3的animation使用的一些坑，需要注意下！

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

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-。

5、Safari对css的校验比较严格，一但出现错误就中段渲染，例如少了或多了括号，今天我就遇到了这个问题，Chrome下样式正常，到Safari下就渲染不到样式，查看远程文件又都有在。。。想破脑袋想不到啥原因，最后去w3c上校验错误，不试不知道一试吓一跳，少了几个冒号多了个括号哈哈。。。

对苹果的严谨又重新认识了一遍。。。