解决浏览器background-image属性不支持css3动画
问题
最近在使用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动画的更多相关文章
- Javascript检测浏览器对CSS属性的支持 /* supports */
//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...
- 如何解决安卓(系统版本低) CSS3 动画问题---高性能动画
目前对提升移动端CSS3动画体验的主要方法有几点: 尽可能多的利用硬件能力,如使用3D变形来开启GPU加速 -webkit-transform: translate3d(0, 0, 0); -moz- ...
- CSS Hack解决浏览器IE部分属性兼容性问题
1.Css Hack 不同厂商的流览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等),对CSS的支持.解析不一样,导致在不同浏览器的环境中呈现出不 ...
- 原生JavaScript判断浏览器对CSS属性是否支持
/*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...
- IE 浏览器background image 属性问题
background-size 如果以百分比的形式设置参数,第一个参数是宽度,第二页参数是高度.“如果只设置第一个参数,则第二个参数为auto”.这样设置,在Firefox chrome 浏览器中,图 ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- wow.js让css3动画变动更有趣(滚动页面动画模拟懒加载特效)
CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 转: css3动画简介以及动画库animate.css的使用
~~~ transition animation 和 animate.css 在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城 ...
随机推荐
- Spring+Quartz 整合一:常规整合
步骤一: 定时任务需要一个配置文件(spring-mvc-timeTask.xml 随便起名),将其在web.xml中加载 <context-param> <param-name&g ...
- iOS事件机制(二)
从上一篇的内容我们知道,在iOS中一个事件用一个UIEvent对象表示,UITouch用来表示一次对屏幕的操作动作,由多个UITouch对象构成了一个UIEvent对象.另外,UIResponder是 ...
- HDU 5675 ztr loves math (数学推导)
ztr loves math 题目链接: http://acm.hust.edu.cn/vjudge/contest/123316#problem/A Description ztr loves re ...
- Linux下常用的shell命令记录
硬件篇 CPU相关 lscpu #查看的是cpu的统计信息. cat /proc/cpuinfo #查看CPU信息详细信息,如每个CPU的型号,主频等 内存相关 free -m #概要查看内存情况 ...
- App启动加载广告页面思路
需求 很多app(如淘宝.美团等)在启动图加载完毕后,还会显示几秒的广告,一般都有个跳过按钮可以跳过这个广告,有的app在点击广告页之后还会进入一个广告页面,点击返回进入首页.今天我们就来开发一个广告 ...
- AfxGetMainWnd()函数用法
CWnd* AfxGetMainWnd( ); 使用AfxGetMainWnd函数获取MFC程序中的主框架类指针是一个常用作法. 就是获得应用程序主窗口的指针,AfxGetMainWnd()-> ...
- Python 3学习笔记2
模块: 模块是一个包含Python代码的文本文件.使用import可以将模块导入到其他程序中. 每个模块都有自己的命名空间.主Python程序中的代码与一个名为__main__的明明空间关联.将代码放 ...
- webservice 缓存机制
本文转载:http://blog.csdn.net/zhdd1234/article/details/4555472 WebService的缓存分为两种,一种是简单的输出缓存,一种是强大的数据缓存 一 ...
- .net简单录音和播放音频文件代码
本代码特点:不用DirectX ,对于C/S .B/S都适用. 方法: //mciSendStrin.是用来播放多媒体文件的API指令,可以播放MPEG,AVI,WAV,MP3,等等,下面介绍一下它的 ...
- Jquery中$与$.fn的差别
当今web开发往往离不开Jquery的使用,Jquery以其简洁的使用方式.良好的浏览器兼容性赢得了软件研发同行的青睐,作为当中的一员,自然也不例外,虽然刚開始时非常排斥Jquery,今天我谈一下对J ...