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



- 苹果信息推送服务(Apple Push Notification Service)使用总结
- top命令的Load average 含义及性能参考基值
- MSDN我告诉你,Windows系统镜像下载
- linux 下查看文件个数及大小
- 在XAMPP上建立多个域名的站点
- pycharm无法识别本地site-packages问题
- linux命令
- emlog模板结构介绍,供大家学习模板修改
- emlog rss.php访问报错【This page contains the following errors】
- 超链接属性rel="external"、rel="nofollow"、rel="external nofollow"三种写法的区别
本文地址:https://blog.hellozwh.com/?post=177
版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。


