CSS3 动画属性animation制作小动效
2017-05-31 本文已影响0人
巴斯光年lip
run.gif
这个动画有6帧，每一帧的长宽相等（56*103），把6帧拼起来，成为一张图（336*103），再通过background-position使图片依次向左移动一帧的宽度（56px），连接成动画。
dog.jpg
<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方法，使得每一个动画关键帧都以“台阶”而非“线性”的形式显示。
