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

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

  發(fā)布時(shí)間：2016-03-10 10:10:21   作者：我_愛(ài)編程   我要評(píng)論
這篇文章主要介紹了利用css3-animation實(shí)現(xiàn)逐幀動(dòng)畫(huà)效果的相關(guān)資料，感興趣的小伙伴們可以參考一下

本文分享了用css3-animation來(lái)制作逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方法，供大家參考，具體內(nèi)容如下

常見(jiàn)用法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. :hover{ animation:mymove  4s ease-out 1s backwards;}   
  2. @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }   
  3. 復(fù)制代碼   
  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ù)值可以用秒’s’也可以用微秒’ms’來(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(http://img.xiaoho.com/2014/12/test.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(http://img.xiaoho.com/2014/12/test.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)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

原文：http://www.cnblogs.com/woloveprogram/p/5258042.html

相關(guān)文章

最新評(píng)論