瞭解基本CSS3動畫屬性值，必須小心避免濫用
阿新 • • 發佈：2018-12-13
我們可以在不使用JavaScript的情況下建立效果和動畫，這將有助於許多設計師的工作。但我們必須小心避免濫用CSS3，因為舊瀏覽器不支援其所有屬性。
基本瞭解CSS，特別是CSS3過渡和關鍵幀動畫，非常重要。使用這個簡單的概念，我們將看到如何製作功能影象滑塊。
CSS3過渡的基本概念
我們可以使用四個過渡屬性：
- transition-property 定義應應用轉換的CSS屬性的名稱。
- transition-duration 定義轉換應發生的持續時間。
- transition-timing-function 確定如何計算轉換的中間值。定時功能的效果通常稱為緩動功能。
- transition-delay 定義轉換何時開始。
目前，Safari ，Chrome，Firefox ，Opera 和IE 的最新版都支援CSS3過渡。由於該技術仍然相對較新，因此需要瀏覽器的字首。到目前為止，每個瀏覽器的語法完全相同，只需要更改字首。
讓我們看看如何將簡單的過渡應用於連結：
動畫屬性有八個子屬性：
- animation-delay 定義動畫開始的時間。
- animation-direction 將動畫設定為在備用迴圈中反向播放。
- animation-duration 定義動畫完成一個迴圈所需的時間長度。
- animation-iteration-count 定義動畫迴圈在停止之前應播放的次數。
- animation-name 指定
- @keyframes 規則的名稱。
- animation-play-state 確定動畫是在執行還是暫停。
- animation-timing-function 描述動畫在一個週期內的進展情況。
- animation-fill-mode 指定CSS動畫在執行之前和之後應如何將樣式應用於其目標。
讓我們看看如何將簡單的動畫應用於div：
每個關鍵幀描述動畫元素應如何在動畫序列中的給定點處呈現。該關鍵幀取一個百分比值來指定時間：0%是動畫的開始，同時100%是結束，可以選擇為中間動畫新增關鍵幀。
CSS3在動畫具有很大的潛力，但它確實有各種瀏覽器限制，所以有時候JavaScript更可取。