利用css3写出帧动画

2017-04-10  本文已影响18人  AlisaMfz

今天我们来练习下,怎么通过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 规定是否应该轮流反向播放动画。

上一篇 下一篇

猜你喜欢

热点阅读