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

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

在開始栗子前，我們先補補基礎知識。?

?

css3動畫分類：

• 補間動畫 – 具有連貫性的動畫 ?
• 逐幀動畫 – 使用steps過渡方式實現跳躍?

?

animation常用屬性及場景：

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

1. timing-function屬性： ?

• ease 規定慢速開始，然后變快，然后慢速結束的過渡效果。

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

• ease-out 規定以慢速結束的過渡效果。

• ease-in-out 規定以慢速開始和結束的過渡效果。

• linear 動畫從頭到尾的速度是相同的。

• cubic-bezier（n,n,n,n） 在cubic-bezier函數中自己的值，n取值為0～1

• steps()

2. delay屬性：用于將動畫與其他動畫的執行時機錯開，將動畫落到不同的時間點。這個屬性很好用～

動畫原則：

運動一般有個慣性，所以要先快后有一個慢一點的反彈。

背景若使用多個星星閃爍，錯位閃爍

?

配合JS使用

slide.addEventListener("webkitAnimationEnd", function() {console.log('eeee') //動畫結束再調用 });

有些情況我們需要確保動畫結束后再進行另外一些交互，可使用該事件監聽。?

?

---

?

?

實戰演習：

假如我們需要實現一個這樣簡單的動畫：

仔細觀察上面的動畫，我們發現，它可以由以下3部分組成：

1. 入場動畫——從右往左移動

2. 左右循環移動

3. 逐幀動畫

?

實現方法：

使用3個dom元素，最外層dom實現入場動畫，第二層dom實現左右移動，第三層dom實現逐幀動畫。

優點：調試方便，節省時間。

缺點：dom多。

1. dom結構

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

2. 分析動畫形成的時間軸：

入場動畫持續0.6s，只播放一次，左右移動以及逐幀動畫持續2s，循環播放，代碼如下：

.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（）實現逐幀動畫： 使用下面這張雪碧圖，通過改變background-position實現動畫切換。 蹬蹬蹬，效果如下面所示，是不是很失望? 原因：由于animation默認以ease方式過渡，它會在每個關鍵幀之間插入補間動畫，所以動畫效果是連貫性的。此時可以使用steps()取消補間動畫。 貼一個圖：

• steps(1,start): 動畫一開始就跳到 100% 直到這一幀（不是整個周期）結束 ? == step-start
• steps(1,end): 保持 0% 的樣式直到這一幀（不是整個周期）結束 ? == step-end

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

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

出現想要的效果了哈～不錯。?

?

?

完整的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

?

轉載于:https://www.cnblogs.com/beidan/p/6826230.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。