问题

最近在使用background-image属性来实现css3的逐帧动画时,碰到了个问题。在chrome浏览器上,background-image属性是支持css3动画的,但是到了firefox上,就完全看不到任何动画。

原因

通过网上查找,才发现W3C标准中明确background-image属性是不支持动画的,所以firefox由于遵循了该标准,并没有给该属性支持动画。

解决过程

解决方法是使用backgrond-position属性,该属性在W3C标准中是支持动画的,因此所有浏览器应该是可以支持的。这在实现时,原来我们可以每一张图片作为一帧,现在就要改成把每一帧的图片拼接到一张图片上,然后根据background-position定位到每一帧的图片,这里我推荐一个比较好的插件grunt-spritesmith,它可以帮助你快速的把你每一帧的图片拼接在一起并生成相应的backgrond-position属性定位信息。

从background-image属性换成background-position属性来实现动画后,又遇到了个问题。由于css3动画的关键帧之间是有补间动画,因此background-position属性在每一帧之间的过渡时,它的效果是在这张拼接的图片上的两个定位之间进行移动,这个并不是我想要的。

因此就需要去除该补间动画,直接跳过这关键帧之间的过渡。这就需要应用到animation-timing-function属性,该属性可以使用阶跃函数steps()定义关键帧之间分多少步进行过渡,这里设置为step(1)就表示关键帧之间一步到位,去除了补间动画,这就不会让图片出现在background-position属性之间的移动动画,而是看到直接的图片切换。

解决浏览器background-image属性不支持css3动画的更多相关文章

  1. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  2. 如何解决安卓(系统版本低) CSS3 动画问题---高性能动画

    目前对提升移动端CSS3动画体验的主要方法有几点: 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz- ...

  3. CSS Hack解决浏览器IE部分属性兼容性问题

    1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...

  4. 原生JavaScript判断浏览器对CSS属性是否支持

    /*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...

  5. IE 浏览器background image 属性问题

    background-size 如果以百分比的形式设置参数,第一个参数是宽度,第二页参数是高度.“如果只设置第一个参数,则第二个参数为auto”.这样设置,在Firefox chrome 浏览器中,图 ...

  6. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  7. wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  8. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  9. 转: css3动画简介以及动画库animate.css的使用

    ~~~ transition  animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...

随机推荐

  1. 5个让人激动的Java项目

    每个Java/JVM领域的技术专家都应从那些项目中获益,他们中有2011在SanJose举办的Jax 会议中提名为最好的技术产品奖的.我之所以选择它们,是因为它们可以广泛用于一系列的项目中,解决真实问 ...

  2. 【转】iOS开发工具系列(按功能分)

    http://www.cocoachina.com/newbie/basic/2014/0417/8187.html 这是我们多篇iOS开发工具系列篇中的一篇,此前的文章比如:那些不能错过的Xcode ...

  3. ActiveX控件的Events事件

    http://labview360.com/article/info.asp?TID=10152&FID=165 Active X函式库 对使用LabVIEW作为开发环境的开发人员来说,如果能 ...

  4. jquery easyui添加图标扩展

    easyui中有很多通过iconCls="icon-reload"这样的属性引入小图标显示,当然我们也可以自己添加自己的小图标. 方式:1.我们可以在jquery easyui的文 ...

  5. eclipse svn切换账号登陆问题

    1.当一个人有权限访问文件代码,而另一个账号无法访问该文件代码,要在eclipse上切换账号登陆有权限的账号时,eclipse会用缓存的账号,不会弹出从新输入新账号的窗口. 这样该怎么解决呢? 关闭e ...

  6. CodeForces 548A Mike and Fax (回文,水题)

    题意:给定一个字符串,问是不是恰好存在 k 个字符串是回文串,并且一样长. 析:没什么好说的,每次截取n/k个,判断是不是回文就好. 代码如下: #include<bits/stdc++.h&g ...

  7. Java学习笔记(八):集合类

    Java中对数据的存储会使用到集合类,下面我们来看看Java中常用的集合类. Collection接口 集合的接口,可以简单的理解为可以动态扩充的数组. Collection接口定义了很多相关的方法, ...

  8. Row_Number()over(order by....) as

    出自:http://www.2cto.com/database/201307/227103.html Sql Server Row_Number()学习   Row_Number():   row_n ...

  9. JS基础DOM篇之二:DOM级别与节点层次?

    通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...

  10. JS 的点点滴滴

    1. ||含义 : 返回第一个有效值 eg : <script type="text/javascript"> var a=""; var c = ...