本篇文章探討了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实现逐帧动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。