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

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

我們先來看看示例

注意：

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

提示：

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

我們再來看看用百分比規(guī)定動畫：

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

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

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

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

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

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

4、aniion-duration：規(guī)定動畫完成一個周期所花費的秒或毫秒。默認是 0。

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

這個屬性有6個值：

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

這個屬性也有6個值：

7、animation-delay：規(guī)定動畫何時開始。默認是 0。負值為跳過幾秒后開始動畫。

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

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

這個屬性也有6個值：

10、animation-play-state：規(guī)定動畫是否正在運行或暫停。默認是 "running"。屬性值有兩個：

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

動畫如下：

當然你看著代碼很多，一旦簡寫也就那么點：

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

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

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