这个动画有6帧,每一帧的长宽相等(56*103),把6帧拼起来,成为一张图(336*103),再通过background-position
使图片依次向左移动一帧的宽度(56px),连接成动画。
<html>结构
<div class="run">
</div>
<css>样式
.run {
margin: 0 auto;
width: 56px;
height: 103px;
background: url(dog.png) no-repeat;
-webkit-animation: run 900ms steps(1) infinite;
animation: run 900ms steps(1) infinite;
}
@keyframes run {
0%, 100%{ background-position: 0 0;}
16.66%{ background-position: -56px 0;}
33.32%{ background-position: -112px 0;}
49.98%{ background-position: -168px 0;}
66.64%{ background-position: -224px 0;}
83.3%{ background-position: -280px 0;}
}
teps(1)
的用法:
animation默认背景图片位置在水平方向上发生了位移,因此整个动画过程是以平滑的形式呈现的。我们要使其“一格一格”地显示,则可以使用animation动画的steps方法,使得每一个动画关键帧都以“台阶”而非“线性”的形式显示。