溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果

發(fā)布時(shí)間：2021-08-09 16:12:53 來源：億速云 閱讀：118 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

animation屬性一覽

因?yàn)閍nimation屬性比較多，然后在w3c上看有點(diǎn)蛋疼，干脆也做了一份導(dǎo)圖，以后想查看，就一目了然了

CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果

使用animation實(shí)現(xiàn)逐幀動(dòng)畫

熟悉了animation的屬性之后，得找個(gè)簡(jiǎn)單的小項(xiàng)目實(shí)現(xiàn)下，逐幀動(dòng)畫好有意思，先跑一個(gè)滿足下自己
思路很簡(jiǎn)單，就是給元素一個(gè)雪碧圖的背景，然后添加的幀動(dòng)畫更改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.   

CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果

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

CSS Code復(fù)制內(nèi)容到剪貼板

  1. @keyframes run{   

  2.     0%, 8%{  /*動(dòng)作一*/  }   

  3.     9.2%, 17.2%{  /*動(dòng)作二*/  }   

  4.     ...   

  5. }   

  6.   

step1：動(dòng)作之間停留8幀，0%設(shè)置動(dòng)作一，動(dòng)作一結(jié)束在8%
step2：動(dòng)作之間過渡1.2幀，9.2%設(shè)置動(dòng)作二，動(dòng)作二結(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逐幀動(dòng)畫</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>  

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

CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果

由上圖可知:

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

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

最終效果，因?yàn)殇浿频膯栴}可能有點(diǎn)卡頓，有興趣的同學(xué)可以直接去跑下：

完整代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2.     <html lang="en">  

  3.     <head>  

  4.         <meta charset="UTF-8">  

  5.         <title>css3逐幀動(dòng)畫</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>  

以上就是CSS3 中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫效果，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手