关于CSS3的animation使用的一些坑,需要注意下! - 起点终站

我们应该感谢相遇,无论结局是喜是悲....
关于CSS3的animation使用的一些坑,需要注意下!
  • 首页 > 教程小结
  • 作者:起点终站
  • 2016年8月18日 20:11 星期四
  • 浏览:61233
  • 字号:
  • 评论:9
  • 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-。


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

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

      您阅读这篇文章共花了:  
    本文作者:起点终站      文章标题: 关于CSS3的animation使用的一些坑,需要注意下!
    本文地址:https://blog.hellozwh.com/?post=177
    版权声明:若无注明,本文皆为“起点终站”原创,转载请保留文章出处。
    • blogger
    福州美贝尔植发2016-10-19 10:48
    背景好看
    上海威沪泵业2016-08-23 16:49
    写的挺好的,学习了 [太开心]
    卢松松博客2016-08-20 12:08
    感谢分享,学习了。
    起点终站 没错,我就是那个帅逼站长2016-08-20 12:27
    感谢来访
    博客大全网2016-08-20 09:30
    也赞一个
    起点终站 没错,我就是那个帅逼站长2016-08-20 12:27
    起得挺早啊,大周末的
    湖北江天2016-08-19 17:30
    赞一个,你是专注css3研究吗?
    起点终站 没错,我就是那个帅逼站长2016-08-20 12:28
    不是,我什么都不专注,但又什么都会一点,就是传说中的打酱油的。。
    我也打了2年酱油了。 [奥特曼]
    返回顶部| 首页| 手气不错| 网站地图| sitemap| 装逼生成器| 站长介绍|

    Copyright © 2016-2019 起点终站 闽ICP备16011094号-1