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知识库！