html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探討了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(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-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(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-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知識庫！
總結
以上是生活随笔為你收集整理的html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle不兼容win7 64位系统,
- 下一篇： c++，string，compare，n