css3 animation實現逐幀動畫

時間 2019-11-14

標籤 css3 css animation 實現動畫欄目 CSS 简体版

原文原文鏈接

css3裏面的animation屬性很是強大，可是本身用的比較少，最近有次面試就恰好被問到了，趁如今有時間就對animation作一個小總結。同時實現一個逐幀動畫的demo做爲練習css

animation屬性一覽

由於animation屬性比較多，而後在w3c上看有點蛋疼，乾脆也作了一份導圖，之後想查看，就一目瞭然了html

使用animation實現逐幀動畫

熟悉了animation的屬性以後，得找個簡單的小項目實現下，逐幀動畫好有意思，先跑一個知足下本身
思路很簡單，就是給元素一個雪碧圖的背景，而後添加的幀動畫更改background-position，關鍵代碼：css3

@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方式過渡，它會在每一個關鍵幀之間插入補間動畫，因此動畫效果是連貫性的
知道緣由就好辦了，解決思路就是：web

@keyframes run{
    0%, 8%{  /*動做一*/  }
    9.2%, 17.2%{  /*動做二*/  }
    ...
}

step1：動做之間停留8幀，0%設置動做一，動做一結束在8%
step2：動做之間過渡1.2幀，9.2%設置動做二，動做二結束在17.2%面試

完整代碼：ide

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css3逐幀動畫</title>
 6     <style>
 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     </style>
43 </head>
44 <body>
45     <div></div>
46 </body>
47 </html>

View Code

還有另一個實現方法，就是利用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)url

最終效果，由於錄製的問題可能有點卡頓，有興趣的同窗能夠直接複製代碼去跑下：spa

完整代碼：code

  1 <!DOCTYPE html>
  2     <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>css3逐幀動畫</title>
  6         <style>
  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         </style>
 97     </head>
 98     <body>
 99         <div></div>
100     </body>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。