
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上校验错误,不试不知道一试吓一跳,少了几个冒号多了个括号哈哈。。。
对苹果的严谨又重新认识了一遍。。。



- JetBrains IDEA 系列产品通用xx方法(license server)
- 苹果信息推送服务(Apple Push Notification Service)使用总结
- 如何通过养博客增加网站的外部链接
- clipboard使用总结---web复制粘贴库
- 解决linux wdcp云锁卸载失败Permission denied
- Linux清空屏幕和清空当前输入的快捷键
- async.waterfall的使用
- Python代码:一行代码输出特定字符"Love"拼成的心形
- /usr/bin/env: node: No such file or directory
- Apache shutdown unexpectedly启动错误解决方法
本文地址:https://blog.hellozwh.com/?post=177
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。


