CSS3動畫如何實現

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

我們先來看看示例

注意：

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

提示：

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

我們再來看看用百分比規定動畫：

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

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

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

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

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

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

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

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

這個屬性有6個值：

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

這個屬性也有6個值：

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

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

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

這個屬性也有6個值：

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

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

動畫如下：

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

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

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

到此，相信大家對“CSS3動畫如何實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！