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

成都創(chuàng)新互聯(lián)專注于邯山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供邯山營銷型網(wǎng)站建設(shè)，邯山網(wǎng)站制作、邯山網(wǎng)頁設(shè)計、邯山網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造邯山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供邯山網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

css3動畫分類：

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

• 逐幀動畫 – 使用steps過渡方式實現(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 動畫從頭到尾的速度是相同的。

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

• steps()

2. delay屬性：

用于將動畫與其他動畫的執(zhí)行時機(jī)錯開，將動畫落到不同的時間點。這個屬性很好用～

動畫原則：

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

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

配合JS使用

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

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

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

假如我們需要實現(xiàn)一個這樣簡單的動畫：

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

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

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

3. 逐幀動畫

實現(xiàn)方法：

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

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

缺點：dom多。

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

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

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

入場動畫持續(xù)0.6s，只播放一次，左右移動以及逐幀動畫持續(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()實現(xiàn)逐幀動畫：

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

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

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

貼一個圖：

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

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

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

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

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

完整的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動畫的詳細(xì)介紹”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

標(biāo)題名稱：CSS3動畫的詳細(xì)介紹
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article4/jcocoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、定制網(wǎng)站、網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計公司、軟件開發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)