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)鍵代碼:
- @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;
- }
但是跑起來后我們發(fā)現(xiàn),每幀動畫之間幀動畫都是滑動,并不是我們要的效果,為什么呢?
原來animation默認(rèn)以ease方式過渡,它會在每個關(guān)鍵幀之間插入補間動畫,所以動畫效果是連貫性的
知道原因就好辦了,解決思路就是:
- @keyframes run{
- 0%, 8%{ /*動作一*/ }
- 9.2%, 17.2%{ /*動作二*/ }
- ...
- }
step1:動作之間停留8幀,0%設(shè)置動作一,動作一結(jié)束在8%
step2:動作之間過渡1.2幀,9.2%設(shè)置動作二,動作二結(jié)束在17.2%
完整代碼:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css3逐幀動畫</title>
- <style>
- @keyframes run{
- 0%, 8%{ background-position: 0 0; }
- 9.2%, 17.2%{ background-position: -140px 0; }
- 18.4%, 26.4%{ background-position: -280px 0 ; }
- 27.6%, 35.6%{ background-position: -420px 0 ; }
- 36.8%, 44.8%{ background-position: -560px 0 ; }
- 46%, 54%{ background-position: -700px 0 ; }
- 55.2%, 63.2%{ background-position: -840px 0 ; }
- 64.4%, 72.4%{ background-position: -980px 0 ; }
- 73.6%, 81.6%{ background-position: -1120px 0 ; }
- 82.8%, 90.8%{ background-position: -1400px 0 ; }
- 92%, 100%{ background-position: -1540px 0 ; }
- }
- @-webkit-keyframes run{
- 0%, 8%{ background-position: 0 0; }
- 9.2%, 17.2%{ background-position: -140px 0; }
- 18.4%, 26.4%{ background-position: -280px 0 ; }
- 27.6%, 35.6%{ background-position: -420px 0 ; }
- 36.8%, 44.8%{ background-position: -560px 0 ; }
- 46%, 54%{ background-position: -700px 0 ; }
- 55.2%, 63.2%{ background-position: -840px 0 ; }
- 64.4%, 72.4%{ background-position: -980px 0 ; }
- 73.6%, 81.6%{ background-position: -1120px 0 ; }
- 82.8%, 90.8%{ background-position: -1400px 0 ; }
- 92%, 100%{ background-position: -1540px 0 ; }
- }
- div{
- width:140px;
- height:140px;
- background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
- animation:run 1s infinite;
- -webkit-animation:run 1s infinite;
- animation-fill-mode : backwards;
- -webkit-animation-fill-mode : backwards;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </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ù)制代碼去跑下:
完整代碼:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>css3逐幀動畫</title>
- <style>
- @keyframes run{
- 0%{
- background-position: 0 0;
- }
- 8.333%{
- background-position: -140px 0;
- }
- 16.666%{
- background-position: -280px 0 ;
- }
- 25.0%{
- background-position: -420px 0 ;
- }
- 33.333%{
- background-position: -560px 0 ;
- }
- 41.666%{
- background-position: -700px 0 ;
- }
- 50.0%{
- background-position: -840px 0 ;
- }
- 58.333%{
- background-position: -980px 0 ;
- }
- 66.666%{
- background-position: -1120px 0 ;
- }
- 75.0%{
- background-position: -1260px 0 ;
- }
- 83.333%{
- background-position: -1400px 0 ;
- }
- 91.666%{
- background-position: -1540px 0 ;
- }
- 100%{
- background-position: 0 0 ;
- }
- }
- @-webkit-keyframes run{
- 0%{
- background-position: 0 0;
- }
- 8.333%{
- background-position: -140px 0;
- }
- 16.666%{
- background-position: -280px 0 ;
- }
- 25.0%{
- background-position: -420px 0 ;
- }
- 33.333%{
- background-position: -560px 0 ;
- }
- 41.666%{
- background-position: -700px 0 ;
- }
- 50.0%{
- background-position: -840px 0 ;
- }
- 58.333%{
- background-position: -980px 0 ;
- }
- 66.666%{
- background-position: -1120px 0 ;
- }
- 75.0%{
- background-position: -1260px 0 ;
- }
- 83.333%{
- background-position: -1400px 0 ;
- }
- 91.666%{
- background-position: -1540px 0 ;
- }
- 100%{
- background-position: 0 0 ;
- }
- }
- div{
- width:140px;
- height:140px;
- background: url(754767/201606/754767-20160601000042992-1734972084.png) ;
- animation:run 1s steps(1, start) infinite;
- -webkit-animation:run 1s steps(1, start) infinite;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
原文地址:http://www.cnblogs.com/Fengzp/p/5548493.html
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
css3基于animation屬性實現(xiàn)的人物動畫特效源碼
這是一款css3基于animation屬性實現(xiàn)的人物動畫特效源碼。主要基于animation的background-position屬性實現(xiàn)的人物動畫效果,沒有引入任何外部js元素2017-05-17CSS3 animation實現(xiàn)簡易幻燈片輪播特效
這篇文章主要為大家詳細(xì)介紹了CSS3 animation實現(xiàn)簡易幻燈片輪播特效,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-27CSS3中動畫屬性transform、transition和animation屬性的區(qū)別
最近在項目中用到了CSS3中的動畫屬性。無奈對于css3幾個新加的屬性不太熟悉,常常容易搞混。所以從網(wǎng)站研究了點資料,總結(jié)一下,方便有需要的朋友們可以參考學(xué)習(xí)。2016-09-25css3基于animation實現(xiàn)旋轉(zhuǎn)的摩天輪動畫特效源碼
這是一款css3基于animation實現(xiàn)旋轉(zhuǎn)的摩天輪動畫特效源碼,該特效實現(xiàn)了摩天輪順時針旋轉(zhuǎn)的動畫效果,且動畫過渡自然,流暢逼真。沒有使用任何JS元素2016-09-21- 這篇文章主要為大家詳細(xì)介紹了CSS3中Animation動畫屬性用法,教大家如何使用animation動畫,感興趣的小伙伴們可以參考一下2016-07-04
CSS3中的Transition過度與Animation動畫屬性使用要點
這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當(dāng)然進一步的控制還是需要JavaScript的2016-05-20- CSS3 Animation 制作動畫點擊波效果代碼是一款使用CSS3 animation動畫來制作點擊波效果,可以在按鈕和圖片等元素上制作點擊波特效。需要的朋友前來下載源碼2016-05-04
CSS3+Animation實現(xiàn)鼠標(biāo)滑過按鈕背景動畫特效源碼
CSS3+Animation實現(xiàn)鼠標(biāo)滑過按鈕背景動畫特效源碼是一款當(dāng)鼠標(biāo)滑過按鈕時,使用CSS3 animation來動畫background-size和background-position屬性,來制作各種背景動畫效果。2016-04-19- 這篇文章主要介紹了css中用animation的steps屬性制作幀動畫,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-25