CSS3動(dòng)畫的詳細(xì)介紹

這篇文章主要介紹“CSS3動(dòng)畫的詳細(xì)介紹”，在日常操作中，相信很多人在CSS3動(dòng)畫的詳細(xì)介紹問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS3動(dòng)畫的詳細(xì)介紹”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

css3動(dòng)畫分類：

• 補(bǔ)間動(dòng)畫 – 具有連貫性的動(dòng)畫

• 逐幀動(dòng)畫 – 使用steps過渡方式實(shí)現(xiàn)跳躍

animation常用屬性及場(chǎng)景：

animation: name duration timing-function delay iteration-count direction;

1. timing-function屬性：

• ease 規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果。

• ease-in 規(guī)定以慢速開始的過渡效果。

• ease-out 規(guī)定以慢速結(jié)束的過渡效果。

• ease-in-out 規(guī)定以慢速開始和結(jié)束的過渡效果。

• linear 動(dòng)畫從頭到尾的速度是相同的。

• cubic-bezier(n,n,n,n) 在cubic-bezier函數(shù)中自己的值，n取值為0～1

• steps()

2. delay屬性：

用于將動(dòng)畫與其他動(dòng)畫的執(zhí)行時(shí)機(jī)錯(cuò)開，將動(dòng)畫落到不同的時(shí)間點(diǎn)。這個(gè)屬性很好用～

動(dòng)畫原則：

1. 運(yùn)動(dòng)一般有個(gè)慣性，所以要先快后有一個(gè)慢一點(diǎn)的反彈。

2. 背景若使用多個(gè)星星閃爍，錯(cuò)位閃爍

配合JS使用

slide.addEventListener("webkitAnimationEnd", function() {     console.log('eeee') //動(dòng)畫結(jié)束再調(diào)用  });

有些情況我們需要確保動(dòng)畫結(jié)束后再進(jìn)行另外一些交互，可使用該事件監(jiān)聽。

實(shí)戰(zhàn)演習(xí)：

假如我們需要實(shí)現(xiàn)一個(gè)這樣簡(jiǎn)單的動(dòng)畫：

仔細(xì)觀察上面的動(dòng)畫，我們發(fā)現(xiàn)，它可以由以下3部分組成：

1. 入場(chǎng)動(dòng)畫——從右往左移動(dòng)

2. 左右循環(huán)移動(dòng)

3. 逐幀動(dòng)畫

實(shí)現(xiàn)方法：

使用3個(gè)dom元素，最外層dom實(shí)現(xiàn)入場(chǎng)動(dòng)畫，第二層dom實(shí)現(xiàn)左右移動(dòng)，第三層dom實(shí)現(xiàn)逐幀動(dòng)畫。

優(yōu)點(diǎn)：調(diào)試方便，節(jié)省時(shí)間。

缺點(diǎn)：dom多。

1. dom結(jié)構(gòu)

<div class="anima_entrance">      <div class="anima_move">          <div class="anima_sprite"></div>      </div>  </div>

2. 分析動(dòng)畫形成的時(shí)間軸：

入場(chǎng)動(dòng)畫持續(xù)0.6s，只播放一次，左右移動(dòng)以及逐幀動(dòng)畫持續(xù)2s，循環(huán)播放，代碼如下：

.anima_entrance {      animation: anima_entrance .6s ease-in-out both;  }     .anima_move {      animation: anima_move 2s linear .6s infinite both;  }     .anima_sprite {      animation: anima_sprite 2s step-end .6s infinite both;  }

3. 使用steps()實(shí)現(xiàn)逐幀動(dòng)畫：

使用下面這張雪碧圖，通過改變background-position實(shí)現(xiàn)動(dòng)畫切換。

蹬蹬蹬，效果如下面所示，是不是很失望?

原因：由于animation默認(rèn)以ease方式過渡，它會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫，所以動(dòng)畫效果是連貫性的。此時(shí)可以使用steps()取消補(bǔ)間動(dòng)畫。

貼一個(gè)圖：

steps(1,start): 動(dòng)畫一開始就跳到 100% 直到這一幀(不是整個(gè)周期)結(jié)束 == step-start

steps(1,end): 保持 0% 的樣式直到這一幀(不是整個(gè)周期)結(jié)束 == step-end

接著，我們將timing-function改成 step-end，效果如下：

animation: sprite 2s step-end .6s infinite both;

出現(xiàn)想要的效果了哈～不錯(cuò)。

完整的css代碼如下：

 .anima_entrance {     position: absolute;      z-index: 3;      top: 5.1rem;      left: 4.05rem;      width: 12.9rem;      height: 19.1rem;      -webkit-animation: anima_entrance .6s ease-in-out both;      animation: anima_entrance .6s ease-in-out both;  }     .anima_move {      width: 218px;      height: 382px;      position: absolute;      z-index: 1;      top: 0;      left: 42px;      -webkit-animation: anima_move 2s linear .6s infinite both;      animation: anima_move 2s linear .6s infinite both;  }     .anima_sprite {      width: 218px;      height: 382px;      background: url(demo.png) no-repeat 0 0;      background-size: 25.8rem 19.1rem;      -webkit-animation: anima_sprite 2s step-end .6s infinite both;      animation: anima_sprite 2s step-end .6s infinite both;  }     @keyframes anima_entrance {      0% {          -webkit-transform: translate3d(18.75rem, 0, 0);          transform: translate3d(18.75rem, 0, 0);      }      100% {          -webkit-transform: translate3d(0, 0, 0);          transform: translate3d(0, 0, 0);      }  }     @keyframes anima_move {      0%, 16%, 42%, 74%, 100% {          -webkit-transform: translate3d(0, 0, 0);          transform: translate3d(0, 0, 0);      }      29% {          -webkit-transform: translate3d(-1rem, 0, 0);          transform: translate3d(-1rem, 0, 0);      }      87% {          -webkit-transform: translate3d(1rem, 0, 0);          transform: translate3d(1rem, 0, 0);      }  }     @keyframes anima_sprite {      0%, 16%, 42%, 58%, 74%, 100% {          background-position: -12.9rem 0;      }      8%, 50%, 66% {          background-position: 0 0;      }  }

到此，關(guān)于“CSS3動(dòng)畫的詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！