今天我们来练习下，怎么通过css3来写出帧动画
首先要有一张很长的图片，这个是帧动画的原型
下面我们来写下基本过程
<div class="loading"></div>
<style>
.loading{
width:100px;height:100px;position:absolute;left:50%;margin-left:-50px;background-size:-100px -4100px;background-images:url(./img/loading.png);background-position: 0 -600px;-webkit-animation:loading2 steps(1,end)1.5s infinite running backwards;animation:loading2 step(1,end) 1.5s infinite running backwards;-moz-animation:loading2 step(1,end) 1.5s infinite running backwards
@keyframes loading2{
3.3%{
background-position:0 -1200px;
}
6.6%{
background-position:0 -1300px;
}
9.9%{
background-position:0 -1400px;
}
13.2%{
background-position:0 -1500px;
}
15.5%{
background-position:0 -1600px;
}
19.8%{
background-position:0 -1700px;
}
23.1%{
background-position:0 -1800px;
}
26.4%{
background-position:0 -1900px;
}
29.7%{
background-position:0 -2000px;
}
33%{
background-position:0 -2100px;
}
36.3%{
background-position:0 -2200px;
}
39.6%{
background-position:0 -2300px;
}
42.9%{
background-position:0 -2400px;
}
46.2%{
background-position:0 -2500px;
}
49.5%{
background-position:0 -2600px;
}
52.8%{
background-position:0 -2700px;
}
56.1%{
background-position:0 -2800px;
}
59.4%{
background-position:0 -2900px;
}
62.7%{
background-position:0-3000px;
}
66%{
background-position:0 -3100px;
}
69.3%{
background-position:0 -3200px;
}
72.6%{
background-position:0-3300px;
}
75.9%{
background-position:0 -3400px;
}
79.2%{
background-position:0 -3500px;
}
82.5%{
background-position:0 -3600px;
}
85.8%{
background-position:0 -3700px;
}
89.1%{
background-position:0 -3800px;
}
92.4%{
background-position:0 -3900px;
}
95.7%{
background-position:0 -4000px;
}
100%{
background-position:0 -4100px;
}
}
</style>
下面我们来复习下 animation 的属性
animation-name 动画的名字
animation-duration 规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function 动画的时间曲线
animation-delay 动画的延长时间
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
网友评论