先看一个Demo
取材于 慕课网
animation-timing-function
- 是控制状态变化的时间属性（作用于每两个关键帧之间，而不是整个动画）
- steps(n,[start/end]) - 越阶函数，默认第二个参数为end，steps(1, start) 等于step-start
- 0%{}20%{}，steps(3),表示0%到20%之间变换时，用了3步完成
- start: 以下一帧的显示效果来填充间隔动画
- end:以上一帧的显示效果来填充间隔动画
什么是逐帧动画？
废话不多说，直接上图
这怎么玩的？
通过现象看本质：其实就是，在肉眼可见的范围内，不停地更换背景图片，background-image
-
假设一张一张地更换图片，那么势必会有卡顿的现象
-
那么咱们可以使用雪碧图 CSS Sprite（backgound-image、background-position）
- 运动 = 关键帧动画 + 雪碧图背景坐标变化
- 图片 384 x 192，每一个人物为 96 x 96，`backgound-image` 的左顶点为原点(0,0)
- 设置图片大小为96px
- 第一行第一列：backgorund-position: 0 0时
- 第一行第二列：backgorund-position: -96px 0px
- 第二行第一列：backgorund-position: 0px -96px
-
用雪碧图做精灵动画会有一个问题，必须通过绝对尺寸获取图片坐标，否则就会出错
- 雪碧图的自适应两种方案：background-size（推荐），scale
-
现在，开始让雪碧图动起来吧
- 运动 = 关键帧动画 + 雪碧图背景坐标变化
.bird {
min-width: 140px;
min-height: 95px;
top: 10%;
right: 10%;
position: absolute;
z-index: 10;
background: url(bird.png);
background-size: 300% 100%;
/*写法1 400ms 换一次位置，一共3个图*/
animation: bird-slow 400ms steps(3) infinite;
/*写法1*/
/* animation: bird-slow 400ms steps(1, start) infinite; */
}
/*写法一*/
bird-slow {
0% {
background-position: 0 0;
}
100% {
background-position: -300% 0;
}
}
/*写法二*/
/* @-webkit-keyframes bird-slow {
0%{background-position:0 0;}
50%{background-position:-100% 0;}
75%{background-position:-200% 0;}
100%{background-position:-300% 0;}
} */
