本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。
<
css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习
animation属性一览
因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了
animation属性一览
使用animation实现逐帧动画
熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己
思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px 0 ;
}
}
div{
width:140px;
height:140px;
background: url(run.png) ;
animation-name：run;
animation-duration:1s;
animation-iteration-count:infinite;
}
但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？
原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
知道原因就好办了，解决思路就是：
1
2
3
4
5
@keyframes run{
0%, 8%{ /*动作一*/ }
9.2%, 17.2%{ /*动作二*/ }
...
}
step1：动作之间停留8帧，0%设置动作一，动作一结束在8%
step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%
完整代码：
复制代码
1
2
3
4
5
css3逐帧动画
6
7 @keyframes run{
8 0%, 8%{ background-position: 0 0; }
9 9.2%, 17.2%{ background-position: -140px 0; }
10 18.4%, 26.4%{ background-position: -280px 0 ; }
11 27.6%, 35.6%{ background-position: -420px 0 ; }
12 36.8%, 44.8%{ background-position: -560px 0 ; }
13 46%, 54%{ background-position: -700px 0 ; }
14 55.2%, 63.2%{ background-position: -840px 0 ; }
15 64.4%, 72.4%{ background-position: -980px 0 ; }
16 73.6%, 81.6%{ background-position: -1120px 0 ; }
17 82.8%, 90.8%{ background-position: -1400px 0 ; }
18 92%, 100%{ background-position: -1540px 0 ; }
19 }
20 @-webkit-keyframes run{
21 0%, 8%{ background-position: 0 0; }
22 9.2%, 17.2%{ background-position: -140px 0; }
23 18.4%, 26.4%{ background-position: -280px 0 ; }
24 27.6%, 35.6%{ background-position: -420px 0 ; }
25 36.8%, 44.8%{ background-position: -560px 0 ; }
26 46%, 54%{ background-position: -700px 0 ; }
27 55.2%, 63.2%{ background-position: -840px 0 ; }
28 64.4%, 72.4%{ background-position: -980px 0 ; }
29 73.6%, 81.6%{ background-position: -1120px 0 ; }
30 82.8%, 90.8%{ background-position: -1400px 0 ; }
31 92%, 100%{ background-position: -1540px 0 ; }
32 }
33 div{
34 width:140px;
35 height:140px;
36 background: url(/blog/754767/06/754767-0601000042992-1734972084.png) ;
37 animation:run 1s infinite;
38 -webkit-animation:run 1s infinite;
39 animation-fill-mode : backwards;
40 -webkit-animation-fill-mode : backwards;
41 }
42
43
44
45
46
47
复制代码
还有另外一个实现方法，就是利用steps(),就是帧之间的阶跃动画，这个在w3c里面没有写，先贴个图
阶跃动画解析
由上图可知:
steps(1,start):动画一开始就跳到 100% 直到这一帧(不是整个周期)结束
steps(1,end):保持 0% 的样式直到这一帧(不是整个周期)结束
另外也可以直接设置 animation-timing-function:step-start/step-end
step-start效果等同于steps(1,start)，step-end效果等同于steps(1,end)
最终效果，因为录制的问题可能有点卡顿，有兴趣的同学可以直接复制代码去跑下：
完整代码：
复制代码
1
2
3
4
5
css3逐帧动画
6
7 @keyframes run{
8 0%{
9 background-position: 0 0;
10 }
11 8.333%{
12 background-position: -140px 0;
13 }
14 16.666%{
15 background-position: -280px 0 ;
16 }
17 25.0%{
18 background-position: -420px 0 ;
19 }
20 33.333%{
21 background-position: -560px 0 ;
22 }
23 41.666%{
24 background-position: -700px 0 ;
25 }
26 50.0%{
27 background-position: -840px 0 ;
28 }
29 58.333%{
30 background-position: -980px 0 ;
31 }
32 66.666%{
33 background-position: -1120px 0 ;
34 }
35 75.0%{
36 background-position: -1260px 0 ;
37 }
38 83.333%{
39 background-position: -1400px 0 ;
40 }
41 91.666%{
42 background-position: -1540px 0 ;
43 }
44 100%{
45 background-position: 0 0 ;
46 }
47 }
48 @-webkit-keyframes run{
49 0%{
50 background-position: 0 0;
51 }
52 8.333%{
53 background-position: -140px 0;
54 }
55 16.666%{
56 background-position: -280px 0 ;
57 }
58 25.0%{
59 background-position: -420px 0 ;
60 }
61 33.333%{
62 background-position: -560px 0 ;
63 }
64 41.666%{
65 background-position: -700px 0 ;
66 }
67 50.0%{
68 background-position: -840px 0 ;
69 }
70 58.333%{
71 background-position: -980px 0 ;
72 }
73 66.666%{
74 background-position: -1120px 0 ;
75 }
76 75.0%{
77 background-position: -1260px 0 ;
78 }
79 83.333%{
80 background-position: -1400px 0 ;
81 }
82 91.666%{
83 background-position: -1540px 0 ;
84 }
85 100%{
86 background-position: 0 0 ;
87 }
88 }
89 div{
90 width:140px;
91 height:140px;
92 background: url(/blog/754767/06/754767-0601000042992-1734972084.png) ;
93 animation:run 1s steps(1, start) infinite;
94 -webkit-animation:run 1s steps(1, start) infinite;
95 }
96
97
98
99
100
本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！
