css3中用animation的steps属性制作帧动画


Posted in HTML / CSS onApril 25, 2019

昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达到类似gif的效果,程序上实现也大抵如此吧。

卧槽真是个神奇的UI boy。

  于是我顺着他的思路,用上了animation在timing-function中的steps属性。

先来看看UI给的图吧,是这样的:(注:图片宽度1200px)

css3中用animation的steps属性制作帧动画

如果要播放这张图片的话,很明显是分为五个帧,然后定义一个动画,background-position从(0,0)到(-图片的宽度,0)。首先要明白background-position的数值指的是背景图的左上角顶点到容器左上角顶点的x,y距离。x,y正数值越大,背景图越向右下角偏移。

所以动画的代码如下:

css3中用animation的steps属性制作帧动画

我们先来播放一下看看效果,设置animation:spinning 2s linear infinite,效果如下:

css3中用animation的steps属性制作帧动画

可以看到是从左到右依次播放:2,3,4,5,6,2,3,4,5,6....。类似跑马灯的效果,既然说到这里就顺便提一下alternate,众所周知infinite linear定义的是0 -> 100 ->0 -> 100 -> 0 -> 100......(始终正向)。而infinite alternate定义的是0 -> 100 -> 100 ->0 -> 0 -> 100......(一下正向一下反向)。修改animation:spinning 2s alternate infinite,效果如下:

css3中用animation的steps属性制作帧动画

但是这都不是我们需要的效果,因为帧动画的关键在于“瞬变”。在animation的timing-function中,有一个steps(n)属性。表示将动画分为n帧。比如说,这里我们定义animation:spinning 2s steps(5) infinite。它在这个例子中表示的效果如下:

css3中用animation的steps属性制作帧动画

在0~400ms时,position:0 0;400ms~800ms,position:-240px 0。800ms~1200ms,position:-480px 0,以此类推。需要注意的是,比如400ms时position为0 0,在401ms时position就突变成-240px 0,即是说position是瞬变的。这个位置变化没有过渡效果,这就是steps的特点:阶跃性。

此时效果如下:

css3中用animation的steps属性制作帧动画

400ms一帧当然太慢了,我们把时间适当压缩一下。比如总动画时长为300ms,那就是60ms一帧,分5帧播放完,这样看起来就会流畅不少。最终效果如下:

 css3中用animation的steps属性制作帧动画

总结

以上所述是小编给大家介绍的css3中用animation的steps属性制作帧动画 ,希望对大家有所帮助!

HTML / CSS 相关文章推荐
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
html5中如何将图片的绝对路径转换成文件对象
Jan 11 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
You might like
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php 数组元素快速去重
2017/05/05 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
window.open的功能全解析
2006/10/10 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
vue+mock.js实现前后端分离
2019/07/24 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
Django实现微信小程序支付的示例代码
2020/09/03 Python
Python爬虫爬取ts碎片视频+验证码登录功能
2021/02/22 Python
华润集团网上药店:健一网
2016/09/19 全球购物
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
村干部四风问题整改措施
2014/09/30 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
2014年实习期工作总结
2014/11/27 职场文书
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS