开发中,一般配合精灵图实现动画效果。
将动画过程分成N份进行:
animation-timing-function: steps(N);
精灵动画制作步骤
1.准备显示区域
设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图。
/* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
width: 140px;
height: 140px;
2.定义动画
改变背景图的位置,移动的距离就是精灵图的宽度。
动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的 form
代码。
@keyframes move {
from {
background-position: 0 0;
}
to {
/* 1680: 精灵图的宽度 */
background-position: -1680px 0;
}
}
3.使用动画
添加速度曲线steps(N),N与精灵图上小图个数相同,并添加无限重复效果。
animation: move 1s steps(12) infinite;
4.多个动画
此时小人是在原地跑,如果想让小人跑远需要在精灵动画上再添加一个盒子位移动画。
@keyframes run {
to {
transform: translateX(800px);
}
然后给一个元素添加多个动画效果,多个动画之间用逗号隔开。
animation: move 1s steps(12) infinite, run 1s forwards;