最近雜七雜八的事情很多，很多知識(shí)都沒來得及總結(jié)，是時(shí)候總結(jié)總結(jié)，開啟新的篇章～

本篇文章不一一列舉CSS3動(dòng)畫的屬性，若需要了解API，可前往 MDN?

在開始栗子前，我們先補(bǔ)補(bǔ)基礎(chǔ)知識(shí)。?

?

css3動(dòng)畫分類：

• 補(bǔ)間動(dòng)畫 – 具有連貫性的動(dòng)畫 ?
• 逐幀動(dòng)畫 – 使用steps過渡方式實(shí)現(xiàn)跳躍?

?

animation常用屬性及場景：

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)畫原則：

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

背景若使用多個(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è)這樣簡單的動(dòng)畫：

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

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

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

3. 逐幀動(dòng)畫

?

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

使用3個(gè)dom元素，最外層dom實(shí)現(xiàn)入場動(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í)間軸：

入場動(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代碼如下：?

1 .anima_entrance { 2 position: absolute; 3 z-index: 3; 4 top: 5.1rem; 5 left: 4.05rem; 6 width: 12.9rem; 7 height: 19.1rem; 8 -webkit-animation: anima_entrance .6s ease-in-out both; 9 animation: anima_entrance .6s ease-in-out both; 10 } 11 12 .anima_move { 13 width: 218px; 14 height: 382px; 15 position: absolute; 16 z-index: 1; 17 top: 0; 18 left: 42px; 19 -webkit-animation: anima_move 2s linear .6s infinite both; 20 animation: anima_move 2s linear .6s infinite both; 21 } 22 23 .anima_sprite { 24 width: 218px; 25 height: 382px; 26 background: url(demo.png) no-repeat 0 0; 27 background-size: 25.8rem 19.1rem; 28 -webkit-animation: anima_sprite 2s step-end .6s infinite both; 29 animation: anima_sprite 2s step-end .6s infinite both; 30 } 31 32 @keyframes anima_entrance { 33 0% { 34 -webkit-transform: translate3d(18.75rem, 0, 0); 35 transform: translate3d(18.75rem, 0, 0); 36 } 37 100% { 38 -webkit-transform: translate3d(0, 0, 0); 39 transform: translate3d(0, 0, 0); 40 } 41 } 42 43 @keyframes anima_move { 44 0%, 16%, 42%, 74%, 100% { 45 -webkit-transform: translate3d(0, 0, 0); 46 transform: translate3d(0, 0, 0); 47 } 48 29% { 49 -webkit-transform: translate3d(-1rem, 0, 0); 50 transform: translate3d(-1rem, 0, 0); 51 } 52 87% { 53 -webkit-transform: translate3d(1rem, 0, 0); 54 transform: translate3d(1rem, 0, 0); 55 } 56 } 57 58 @keyframes anima_sprite { 59 0%, 16%, 42%, 58%, 74%, 100% { 60 background-position: -12.9rem 0; 61 } 62 8%, 50%, 66% { 63 background-position: 0 0; 64 } 65 } View Code

?

轉(zhuǎn)載于:https://www.cnblogs.com/beidan/p/6826230.html

總結(jié)

以上是生活随笔為你收集整理的一个栗子上手CSS3动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。