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

css3中怎么利用animation實(shí)現(xiàn)逐幀動(dòng)畫(huà)效果，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

常見(jiàn)用法：

1. :hover{ animation:mymove  4s ease-out 1s backwards;}   

2. @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }   

3.   

4. 解釋?zhuān)?  

5. mymove :keyframes的名稱(chēng);   

6. 4s:動(dòng)畫(huà)的總時(shí)間;     

7. ease-out: 快結(jié)束的時(shí)候慢下來(lái);   

8. 1s:停頓1秒后開(kāi)始動(dòng)畫(huà);   

9. backwards:動(dòng)畫(huà)結(jié)束后回到原點(diǎn)   

10. 默認(rèn)：播放一次   

11.   

12. 或者   

13. transition:left 4s ease-out    

14. ：hover{left:200px}   

15.   

兼容主流瀏覽器：

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

1. .test{   

2.   -webkit-animation: < 各種屬性值 >;   

3.      -moz-animation: < 各種屬性值 >;   

4.        -o-animation: < 各種屬性值 >;   

5.           animation: < 各種屬性值 >;   

6.     }   

animation-name，規(guī)定要綁定的keyframes的名稱(chēng)，隨便你取，不過(guò)為了日后維護(hù)的方便，建議取一個(gè)跟動(dòng)作相關(guān)名稱(chēng)相近的名稱(chēng)比較好。比如要我們要綁定一個(gè)跑的動(dòng)作，那么可以命名為run。

time，這里有兩個(gè)時(shí)間，前面一個(gè)是規(guī)定完成這個(gè)動(dòng)畫(huà)所需要的時(shí)間，全稱(chēng)叫animation-duration，第二個(gè)time為動(dòng)畫(huà)延遲開(kāi)始播放的時(shí)間，全稱(chēng)叫animation-delay，這兩個(gè)數(shù)值可以用秒&rsquo;s&rsquo;也可以用微秒&rsquo;ms&rsquo;來(lái)寫(xiě)，1000ms=1s，這個(gè)不用一一介紹。

animation-timing-function，規(guī)定動(dòng)畫(huà)的運(yùn)動(dòng)曲線(xiàn)，這里有9個(gè)值，分別是ease| linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(x1, y1, x2, y2)

ease：動(dòng)畫(huà)緩慢開(kāi)始，接著加速，最后減慢，默認(rèn)值;
linear：動(dòng)畫(huà)從頭到尾的速度是相同的;
ease-in：以低速開(kāi)始；
ease-out：以低速結(jié)束；
ease-in-out：動(dòng)畫(huà)以低速開(kāi)始和結(jié)束；

效果一樣 （按步數(shù)）steps

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

1. .test1{   

2.  background:url(https://cache.yisu.com/upload/information/20210311/295/11218.png) no-repeat 0 0;   

3.  -webkit-animation:run 350ms steps(1) infinite 0s;}   

4. @-webkit-keyframes run {       

5.     0% {   

6.            background-position:0;   

7.     }   

8.     20% {   

9.        background-position:-90px 0;   

10.     }   

11.     40% {   

12.        background-position:-180px 0;   

13.     }   

14.     60% {   

15.        background-position:-270px 0;   

16.     }   

17.     80% {   

18.        background-position:-360px 0;   

19.     }   

20.     100% {   

21.        background-position:-450px 0;   

22.     }   

23.   

24. }   

25. .test2{   

26.  background:url(https://cache.yisu.com/upload/information/20210311/295/11218.png) no-repeat 0 0;   

27.  -webkit-animation:run 350ms steps(5) infinite 0s;}   

28.   

29. @-webkit-keyframes run {   

30.     100% {   

31.        background-position:-450px 0;   

32.     }   

33.   

34. }   

35.   

animation-iteration-count，動(dòng)畫(huà)播放次數(shù)，默認(rèn)值為1，infinite為無(wú)限制，假如設(shè)置為無(wú)限制，那么動(dòng)畫(huà)就會(huì)不停地播放。

animation-direction，規(guī)定動(dòng)畫(huà)是否反方向運(yùn)動(dòng)。
= normal | reverse | alternate | alternate-reverse
第一個(gè)值是正常轉(zhuǎn)動(dòng)播放，默認(rèn)值，reverse為反向轉(zhuǎn)動(dòng)，alternate一開(kāi)始正常轉(zhuǎn)動(dòng)，播放完一次之后接著再反向轉(zhuǎn)動(dòng)，假如設(shè)置animation-iteration-count:1則該值無(wú)效，alternate-reverse一開(kāi)始為反向轉(zhuǎn)動(dòng)，播完一次之后按照回歸正常轉(zhuǎn)動(dòng)，交替轉(zhuǎn)動(dòng)，設(shè)置count為1，則該值無(wú)效。
animation-play-state，定義動(dòng)畫(huà)是否運(yùn)行或暫停，這是后來(lái)新增的屬性，有兩個(gè)屬性值分別是running和paused。默認(rèn)值為normal，動(dòng)畫(huà)正常播放。假如是為paused，那么動(dòng)畫(huà)暫停。假如一個(gè)動(dòng)畫(huà)一開(kāi)始為運(yùn)動(dòng)，那么假如設(shè)置paused那么該動(dòng)畫(huà)暫停，假如再設(shè)置running，那么該動(dòng)畫(huà)會(huì)從剛才暫停處開(kāi)始運(yùn)動(dòng)
animation-fill-mode，定義動(dòng)畫(huà)播放時(shí)間之外的狀態(tài)，顧名思義，要么就是在動(dòng)畫(huà)播放完了之后給它一個(gè)狀態(tài) animation-fill-mode : none | forwards | backwards | both; none，播放完之后不改變默認(rèn)行為，默認(rèn)值，forwards則是停在動(dòng)畫(huà)最后的的那個(gè)畫(huà)面，backwards則是回調(diào)到動(dòng)畫(huà)最開(kāi)始出現(xiàn)的畫(huà)面，both則應(yīng)用為動(dòng)畫(huà)結(jié)束或開(kāi)始的狀態(tài)。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。