搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS3 animation如何实现逐帧动画效果

发布时间：2023-01-03 18:45:26 来源：网络
.
春天来了，花园里开满了花，有梅花，有迎春花，有山茶花，有丁香花，真是太好看了。

css3里面的animation属性非常强大，但是自己用的比较少，最近有次面试就刚好被问到了，趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习

animation属性一览

因为animation属性比较多，然后在w3c上看有点蛋疼，干脆也做了一份导图，以后想查看，就一目了然了

使用animation实现逐帧动画

熟悉了animation的属性之后，得找个简单的小项目实现下，逐帧动画好有意思，先跑一个满足下自己
思路很简单，就是给元素一个雪碧图的背景，然后添加的帧动画更改background-position，关键代码：

CSS Code复制内容到剪贴板
  1. @keyframesrun{
  2. from{
  3. background-position:00;
  4. }
  5. to{
  6. background-position:-1540px0;
  7. }
  8. }
  9. div{
  10. width:140px;
  11. height:140px;
  12. background:url(run.png);
  13. animation-name：run;
  14. animation-duration:1s;
  15. animation-iteration-count:infinite;
  16. }

但是跑起来后我们发现，每帧动画之间帧动画都是滑动，并不是我们要的效果,为什么呢？
原来animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的
知道原因就好办了，解决思路就是：

CSS Code复制内容到剪贴板
  1. @keyframesrun{
  2. 0%,8%{/*动作一*/}
  3. 9.2%,17.2%{/*动作二*/}
  4. ...
  5. }

step1：动作之间停留8帧，0%设置动作一，动作一结束在8%
step2：动作之间过渡1.2帧，9.2%设置动作二，动作二结束在17.2%

完整代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>css3逐帧动画</title>
  6. <style>
  7. @keyframesrun{
  8. 0%,8%{background-position:00;}
  9. 9.2%,17.2%{background-position:-140px0;}
  10. 18.4%,26.4%{background-position:-280px0;}
  11. 27.6%,35.6%{background-position:-420px0;}
  12. 36.8%,44.8%{background-position:-560px0;}
  13. 46%,54%{background-position:-700px0;}
  14. 55.2%,63.2%{background-position:-840px0;}
  15. 64.4%,72.4%{background-position:-980px0;}
  16. 73.6%,81.6%{background-position:-1120px0;}
  17. 82.8%,90.8%{background-position:-1400px0;}
  18. 92%,100%{background-position:-1540px0;}
  19. }
  20. @-webkit-keyframesrun{
  21. 0%,8%{background-position:00;}
  22. 9.2%,17.2%{background-position:-140px0;}
  23. 18.4%,26.4%{background-position:-280px0;}
  24. 27.6%,35.6%{background-position:-420px0;}
  25. 36.8%,44.8%{background-position:-560px0;}
  26. 46%,54%{background-position:-700px0;}
  27. 55.2%,63.2%{background-position:-840px0;}
  28. 64.4%,72.4%{background-position:-980px0;}
  29. 73.6%,81.6%{background-position:-1120px0;}
  30. 82.8%,90.8%{background-position:-1400px0;}
  31. 92%,100%{background-position:-1540px0;}
  32. }
  33. div{
  34. width:140px;
  35. height:140px;
  36. background:url(blog/754767/201606/754767-20160601000042992-1734972084.png);
  37. animation:run1sinfinite;
  38. -webkit-animation:run1sinfinite;
  39. animation-fill-mode:backwards;
  40. -webkit-animation-fill-mode:backwards;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <div></div>
  46. </body>
  47. </html>

还有另外一个实现方法，就是利用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)

最终效果，因为录制的问题可能有点卡顿，有兴趣的同学可以直接复制代码去跑下：

完整代码：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="en">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>css3逐帧动画</title>
  6. <style>
  7. @keyframesrun{
  8. 0%{
  9. background-position:00;
  10. }
  11. 8.333%{
  12. background-position:-140px0;
  13. }
  14. 16.666%{
  15. background-position:-280px0;
  16. }
  17. 25.0%{
  18. background-position:-420px0;
  19. }
  20. 33.333%{
  21. background-position:-560px0;
  22. }
  23. 41.666%{
  24. background-position:-700px0;
  25. }
  26. 50.0%{
  27. background-position:-840px0;
  28. }
  29. 58.333%{
  30. background-position:-980px0;
  31. }
  32. 66.666%{
  33. background-position:-1120px0;
  34. }
  35. 75.0%{
  36. background-position:-1260px0;
  37. }
  38. 83.333%{
  39. background-position:-1400px0;
  40. }
  41. 91.666%{
  42. background-position:-1540px0;
  43. }
  44. 100%{
  45. background-position:00;
  46. }
  47. }
  48. @-webkit-keyframesrun{
  49. 0%{
  50. background-position:00;
  51. }
  52. 8.333%{
  53. background-position:-140px0;
  54. }
  55. 16.666%{
  56. background-position:-280px0;
  57. }
  58. 25.0%{
  59. background-position:-420px0;
  60. }
  61. 33.333%{
  62. background-position:-560px0;
  63. }
  64. 41.666%{
  65. background-position:-700px0;
  66. }
  67. 50.0%{
  68. background-position:-840px0;
  69. }
  70. 58.333%{
  71. background-position:-980px0;
  72. }
  73. 66.666%{
  74. background-position:-1120px0;
  75. }
  76. 75.0%{
  77. background-position:-1260px0;
  78. }
  79. 83.333%{
  80. background-position:-1400px0;
  81. }
  82. 91.666%{
  83. background-position:-1540px0;
  84. }
  85. 100%{
  86. background-position:00;
  87. }
  88. }
  89. div{
  90. width:140px;
  91. height:140px;
  92. background:url(754767/201606/754767-20160601000042992-1734972084.png);
  93. animation:run1ssteps(1,start)infinite;
  94. -webkit-animation:run1ssteps(1,start)infinite;
  95. }
  96. </style>
  97. </head>
  98. <body>
  99. <div></div>
  100. </body>

原文地址：http://www.cnblogs.com/Fengzp/p/5548493.html

以上就是CSS3 animation如何实现逐帧动画效果。对于钱这个问题，拿还是不拿，挣还是不挣，很简单，问问良心，它说可以就可以；它说不可以，就坚决不可以。更多关于CSS3 animation如何实现逐帧动画效果请关注haodaima.com其它相关文章！

以下您可能有感兴趣的文章:
标签： animation
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图