使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题相关的知识,希望对你有一定的参考价值。
参考技术A 网页中使用gif动态图时,部分IE浏览器会出现动画不流畅的效果,体验很不好。故可以考虑使用CSS3 animation来控制动画播放,避免使用gif动态图。其实际原理为,把动态图拼接成当行排列的雪碧图,通过CSS3 animation控制雪碧图的移动速度,进而模拟gif的图片播放效果。css3 操作动画要点
CSS3 有3种和动画相关的属性:transform, transition, animation。
不同点:
1. 触发条件不同。transition通常和hover等事件配合使用,由事件触发。animation则和gif动态图差不多,立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性, transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式,transition负责动画效果,天作之合,比之前只能用js时爽太多。
结论:
1. 如果要灵活定制多个帧以及循环,用animation.
2. 如果要简单的from to 效果,用 transition.
3. 如果要使用js灵活设定动画属性,用transition.
以上是关于使用CSS3 animation模拟gif动画,解决部分浏览器gif图卡顿问题的主要内容,如果未能解决你的问题,请参考以下文章