CSS3序列帧动画
来源：互联网 发布：还珠格格原著知画结局 编辑：程序博客网 时间：2024/06/04 18:46
- 前言
- 1背景
- 2实例
- animation
- 1 animation简介
- 1 animation-name
- 2 animation-timing-function
- 3 animation-iteration-count
- 4 animation-direction
- 5 animation-play-state
- 6 animation-play-state
- 2 帧动画
- 1 线性动画与帧动画对比
- 2 animation-timing-function中的steps
- 1 参数2 - start和end
- 2 参数1 - integer
- 1 animation简介
- 实战
- 1 小女孩跑起来
- 2 其他属性尝试
- 1 animation-direction
- 2 animation-play-state
注意：为代码看上去简洁，本文实例中都忽略了前缀，而在实际使用中需加上。
1. 前言
(1)背景
实践当中，很多复杂的动画，一般不要求我们用CSS3变形的方式画出来，而是采用一帧一帧连续播放静态的图片的方式形成动画。
(2)实例
例如让下面图片中的小女孩跑起来。
（图片出处：http://www.zcool.com.cn/work/ZMjE3OTQyMzY=.html，仅用于demo素材，不商用，如有侵权，请及时联系）
2. animation
(1) animation简介
内容参考 http://www.css88.com/book/css/properties/animation/index.htm
animation是个复合属性。检索或设置对象所应用的动画特效。如果提供多组属性值，以逗号进行分隔。
它有如下取值：
<' animation-name '>：检索或设置对象所应用的动画名称 <' animation-duration '>：检索或设置对象动画的持续时间 <' animation-timing-function '>：检索或设置对象动画的过渡类型 <' animation-delay '>：检索或设置对象动画延迟的时间 <' animation-iteration-count '>：检索或设置对象动画的循环次数 <' animation-direction '>：检索或设置对象动画在循环中是否反向运动 <' animation-fill-mode '>：检索或设置对象动画时间之外的状态 <' animation-play-state '>：检索或设置对象动画的状态。w3c正考虑是否将该属性移除，因为动画的状态可以通过其它的方式实现，比如重设样式
[1] animation-name
检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
[2] animation-timing-function
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0) ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) step-start：等同于 steps(1, start) step-end：等同于 steps(1, end) steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。 cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
[3] animation-iteration-count
infinite: 无限循环 <number>: 指定对象动画的具体循环次数
[4] animation-direction
normal：正常方向 reverse：反方向运行 alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行
[5] animation-play-state
即动画完成时，是显示动画开始的状态还是结束时的状态。
none：默认值。不设置对象动画之外的状态 forwards：设置对象状态为动画结束时的状态 backwards：设置对象状态为动画开始时的状态 both：设置对象状态为动画结束或开始的状态
[6] animation-play-state
running：运动 paused：暂停
(2) 帧动画
[1] 线性动画与帧动画对比
平时我们接触的是线性动画，例如：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>demo for animation</title> <style> div{ height: 100px; width: 100px; -webkit-animation: run 3s; } @-webkit-keyframes run{ 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: blue; } } </style> </head> <body> <div></div> </body></html>运行的效果是：块从红色渐变到绿色再渐变到蓝色。期间，会出现棕色靛蓝等过渡色。如果只想出现红绿蓝三种颜色，不过渡。那么这样的方式就是帧动画了。
[2] animation-timing-function中的steps()
上文中介绍了它，帧动画就要靠它实现。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>demo for animation</title> <style> div{ height: 100px; width: 100px; -webkit-animation: run 1s steps(1,end); } @-webkit-keyframes run{ 0%{ background-color: red; } 50%{ background-color: green; } 100%{ background-color: blue; } } </style> </head> <body> <div></div> </body></html>运行，咦？怎么只有红、绿两个颜色。
如果把end改为start呢？只有绿、蓝两个颜色了。
W3C上关于step timing functions（https://www.w3.org/TR/css-timing-1/#step-timing-functions）是这样介绍的：
A step timing function is a type of timing function that divides the input time into a specified number of intervals that are equal in length.
同时画出了它的工作机制：
steps(<integer>[, [ start | end ] ]?)
以上例进行分析：
1) 参数2 - start和end
对照上图的工作机制可以看出：
不是线性变化，那么在一个时间段的显示要不以上一帧，要不以下一帧的效果来填充。这个参数就是进行这个指定的。
所以，不同于线性动画的设置，如果希望显示三段红绿蓝，应该将时间段化为三部分，也就是0%-33.333%、33.333%-66.666%、66.666%-100%，如下：
/*-start-*/div{ height: 100px; width: 100px; -webkit-animation: run 1s steps(1,start);}@-webkit-keyframes run{ 0%{ } 33.333%{ background-color: red; } 66.666%{ background-color: green; } 100%{ background-color: blue; }}/*-end-*/div{ height: 100px; width: 100px; -webkit-animation: run 1s steps(1,end);}@-webkit-keyframes run{ 0%{ background-color: red; } 33.333%{ background-color: green; } 66.666%{ background-color: blue; } 100%{ }}2) 参数1 - integer
首先，我们尝试下将上例中的1改为3：
-webkit-animation: run 3s steps(3,end);运行后发现，出现了9种颜色。对照上图的工作机制。我们发现，它对每一个时间段进行了插值。例如本来0-33.333%这个时间段内是只显示红色的。设置成3之后，将其分成了三段，分别显示红、棕、褐。而我们只进行了红绿蓝的样式定义。
需要强调的是，这个参数不是用来设置整个动画分为几段，而是将已定义的时间段内进行再分割。
3. 实战
弄清楚了animation中的各种参数设置，特别是steps中如何设置帧动画，我们回到前言中提到的实例进行实战。
(1) 小女孩跑起来
实例中我打算采用61、63、65、67、69、71、72一共7张图来实现跑动的效果。所以需要分为7段，100% / 7 = 14.285%。由于需要连续跑，所以加上了infinite。
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>demo for animation</title> <style> div{ background-image: url('image/image.jpeg'); background-repeat: no-repeat; height: 345px; width: 235px; -webkit-animation: girlRun 1s steps(1,end) infinite; } @-webkit-keyframes girlRun{ 0%{ background-position: 0px 0; } 14.285%{ background-position: -180px 0; } 28.571%{ background-position: -369px 0; } 42.857%{ background-position: -609px 0; } 57.143%{ background-position: -35px -424px; } 71.429%{ background-position: -235px -424px; } 85.714%{ background-position: -435px -424px; } 100%{ } } </style> </head> <body> <div></div> </body></html>注：图片使用为相对路径。跑这个demo需要下载图片。
运行后的效果如下（由于不支持上传视频，此处制作了gif进行效果展示）
(2) 其他属性尝试
先前提到了很多属性，我们利用这个小女孩奔跑的案例进行尝试。
[1] animation-direction
上文提到这个属性设置运动的方向。
-webkit-animation: girlRun 1s steps(1,end) infinite reverse;测试下，设置成reverse后小女孩向后倒着跑。
同理，alternate是正着跑再倒着跑，alternate-reverse是倒着跑再正着跑，交替进行。所以，这两个属性需要和infinite连用才会有效果。
[2] animation-play-state
可以取值running和paused，如何使用呢？
增加一个样式：
div:hover{ animation-play-state: paused;}此时，当鼠标移动到图片上时，小女孩停止跑动。
- CSS3序列帧动画
- CSS3 Animation 帧动画
- css3实现帧动画
- css3制作帧动画
- CSS3 Animation 帧动画
- CSS3 animation（CSS3 帧动画）
- 解放生产力，CSS3帧动画工具
- css3 animation 实现帧动画
- CSS3实现逐帧动画
- 制作动画序列帧
- 序列帧动画
- Unity 序列帧动画
- 序列帧动画
- 序列帧动画
- 序列帧动画.shader
- 序列帧动画
- iOS序列帧动画
- unity-序列帧动画
- 搞科研(功能结构矩阵)
- LeetCode【53】Maximum Subarray
- Blob类型转为json格式问题
- HDU-1754 I Hate It (线段树 入门题 点修改 区间查询)
- IT伦理与道德
- CSS3序列帧动画
- Debian查看系统版本
- ajax 发送请求无法重定向问题
- Pyhon的集合
- linux最近用的几个vi命令
- 决策树
- java.lang.ClassNotFoundException: net.sf.json.JSONObject
- 自适应高度布局
- 关于接口api调用
