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圆角边框和边框阴影示例
May 05 HTML / CSS
实例教程 一款纯css3实现的数字统计游戏
Nov 10 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML5拖放API实现自动生成相框功能
Apr 07 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
HTML基础详解(上)
Oct 16 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使用curl发送json格式数据实例
2013/12/17 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
js实现获取鼠标当前的位置
2016/12/14 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python输出9*9乘法表的方法
2015/05/25 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
新手学python应该下哪个版本
2020/06/11 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
如何通过python检查文件是否被占用
2020/12/18 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
大学生职业规划书的范本
2014/02/18 职场文书
公司营业员的自我评价
2014/03/04 职场文书
销售顾问工作计划书
2014/09/15 职场文书
2014年党员学习“三严三实”思想汇报
2014/09/15 职场文书
golang json数组拼接的实例
2021/04/28 Golang
golang slice元素去重操作
2021/04/30 Golang
Python类方法总结讲解
2021/07/26 Python