本篇內(nèi)容主要講解“CSS3動(dòng)畫如何實(shí)現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS3動(dòng)畫如何實(shí)現(xiàn)”吧!

專注于為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)鞏留免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了千余家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

我們先來看看示例

注意：

這里呢，我們用 myfirst 來命名我們的動(dòng)畫，然后用 animation 屬性來給 div 綁定動(dòng)畫名稱，讓div執(zhí)行我們的動(dòng)畫。from——to，背景顏色由紅色變成黃色，規(guī)定完成的動(dòng)畫是5秒，必須定義動(dòng)畫的名稱和動(dòng)畫的持續(xù)時(shí)間。如果省略的持續(xù)時(shí)間，動(dòng)畫將無法運(yùn)行，因?yàn)槟J(rèn)值是0。

提示：

當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：

我們?cè)賮砜纯从冒俜直纫?guī)定動(dòng)畫：

注意：這里我們使用了百分比來規(guī)定動(dòng)畫變化。

這個(gè)就是一個(gè)正方形按一個(gè)矩形的軌跡跑了一圈。

剩下的也就沒什么了，主要是一些CSS3 動(dòng)畫屬性，我們就來看看：

1、@keyframes：規(guī)定動(dòng)畫。就是綁定在元素上的動(dòng)畫名稱，用這個(gè)名稱來規(guī)定動(dòng)畫。

2、animation：所有動(dòng)畫屬性的簡寫屬性，除了 animation-play-state 屬性。

3、animation-name：規(guī)定 @keyframes 動(dòng)畫的名稱。一般情況直接就簡寫了。

4、aniion-duration：規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。

5、animon-timing-function：規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。

這個(gè)屬性有6個(gè)值：

6、animation-fill-mode：規(guī)定當(dāng)動(dòng)畫不播放時(shí)（當(dāng)動(dòng)畫完成時(shí)，或當(dāng)動(dòng)畫有一個(gè)延遲未開始播放時(shí)），要應(yīng)用到元素的樣式。

這個(gè)屬性也有6個(gè)值：

7、animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。負(fù)值為跳過幾秒后開始動(dòng)畫。

8、animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。另外的值：infinite，指定動(dòng)畫應(yīng)該播放無限次（永遠(yuǎn)）

9、animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。

這個(gè)屬性也有6個(gè)值：

10、animation-play-state：規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。屬性值有兩個(gè)：

我們來看看將這些所有屬性放在一起形成的動(dòng)畫：

動(dòng)畫如下：

當(dāng)然你看著代碼很多，一旦簡寫也就那么點(diǎn)：

當(dāng)然，我們能實(shí)現(xiàn)的不僅僅這單一元素的動(dòng)畫軌跡，只要你能熟悉的掌握CSS3動(dòng)畫，能實(shí)現(xiàn)很多的效果，我們來看看官方案例實(shí)現(xiàn)九大行星運(yùn)動(dòng)的軌跡動(dòng)畫。

看著挺炫的吧，所以說CSS3功能挺強(qiáng)大的，有時(shí)候能用CSS3完成的動(dòng)畫效果，我們絕不用js/jquery，其實(shí)挺簡單的，無非就是給HTML元素綁定動(dòng)畫，然后給動(dòng)畫添加時(shí)間，運(yùn)動(dòng)的效果，就可以實(shí)現(xiàn)，最后檢測一下兼容性就好了。

到此，相信大家對(duì)“CSS3動(dòng)畫如何實(shí)現(xiàn)”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

文章題目：CSS3動(dòng)畫如何實(shí)現(xiàn)
分享鏈接：http://aaarwkj.com/article18/pdicdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、營銷型網(wǎng)站建設(shè)、域名注冊(cè)、網(wǎng)頁設(shè)計(jì)公司、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站

廣告

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