欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 animation實現(xiàn)逐幀動畫效果

  發(fā)布時間：2016-06-02 11:53:13   作者：佚名   我要評論
這篇文章主要介紹了CSS3 animation實現(xiàn)逐幀動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

css3里面的animation屬性非常強大，但是自己用的比較少，最近有次面試就剛好被問到了，趁現(xiàn)在有時間就對animation做一個小總結(jié)。同時實現(xiàn)一個逐幀動畫的demo作為練習(xí)

animation屬性一覽

因為animation屬性比較多，然后在w3c上看，干脆也做了一份導(dǎo)圖，以后想查看，就一目了然了

使用animation實現(xiàn)逐幀動畫

熟悉了animation的屬性之后，得找個簡單的小項目實現(xiàn)下，逐幀動畫好有意思，先跑一個滿足下自己
思路很簡單，就是給元素一個雪碧圖的背景，然后添加的幀動畫更改background-position，關(guān)鍵代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes run{   
  2.     from{   
  3.         background-position: 0 0;   
  4.     }   
  5.     to{   
  6.         background-position: -1540px 0 ;   
  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. }   
  17.   

但是跑起來后我們發(fā)現(xiàn)，每幀動畫之間幀動畫都是滑動，并不是我們要的效果,為什么呢？
原來animation默認(rèn)以ease方式過渡，它會在每個關(guān)鍵幀之間插入補間動畫，所以動畫效果是連貫性的
知道原因就好辦了，解決思路就是：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @keyframes run{   
  2.     0%, 8%{  /*動作一*/  }   
  3.     9.2%, 17.2%{  /*動作二*/  }   
  4.     ...   
  5. }   
  6.   

step1：動作之間停留8幀，0%設(shè)置動作一，動作一結(jié)束在8%
step2：動作之間過渡1.2幀，9.2%設(shè)置動作二，動作二結(jié)束在17.2%

完整代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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(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>  

還有另外一個實現(xiàn)方法，就是利用steps(),就是幀之間的階躍動畫，這個在w3c里面沒有寫，先貼個圖

由上圖可知:

steps(1,start):動畫一開始就跳到 100% 直到這一幀（不是整個周期）結(jié)束
steps(1,end):保持 0% 的樣式直到這一幀（不是整個周期）結(jié)束

另外也可以直接設(shè)置 animation-timing-function:step-start/step-end
step-start效果等同于steps(1,start)，step-end效果等同于steps(1,end)

最終效果，因為錄制的問題可能有點卡頓，有興趣的同學(xué)可以直接復(fù)制代碼去跑下：

完整代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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(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>  

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論