這篇是關於簡單的css3-animation介紹，適合小白作為動畫了解的入門篇。
為了在專案中使用動畫，只需要做兩件事：
01建立動畫
02將其連線到必須設定動畫的元素，並指示所需的功能
動畫是一組關鍵幀，它們儲存在css中，我們先看一段簡單的動畫**段：
@keyframes test-animation
100%
}
關鍵字「 @keyframes」指示動畫本身。
接下來動畫的命名，「 test-animation」。
花括號包含關鍵幀列表。在這種情況下，它是開始幀0％和結束幀100％。同樣，開始和結束幀也可以寫為關鍵字「 from 」和「 to」。
採用from…to…改寫上面的**,可以這樣寫：
@keyframes test-animation
30%
60.8%
to }
將上面動畫的**應用到指定元素是通過兩個命令完成的：
element@keyframes animation-name
100%
}
elementelementelementanimation-fill-mode：forwards：動畫完成後，元素狀態將對應於最後一幀。
animation-fill-mode：backwards：動畫完成後，元素狀態將對應於第一幀。
animation-fill-mode：both：動畫開始之前，元素狀態將與第一幀相對應，而在其完成之後將與最後乙個幀相對應。
animation-play-state：動畫的啟動與暫停。該功能僅使用2個值：「 running 」或「 paused」。
animation-timing-function：動畫時間函式，允許設定特殊功能，該功能負責動畫重播速度。常用的函式名稱有ease,ease-in,ease-out,ease-in-out,linear,step-start,step-end.
這種時間函式可以自己建立：貝塞爾曲線cubic-bezier。
animation-timing-function: cubic-bezier(p1x, p1y, p2x, p2y);
採用四個引數，並基於它們建立動畫過程中的值分布曲線。可以在設定函式：
css3新動 CSS3 動畫
注意 1 animation play state 也是 animation 的簡寫屬性，但在 webkit 中不適用 animation myfirst 5s infinite linear paused 即 animation name myfirst animation duration 5s...
CSS基礎 CSS3動畫
通過css3動畫屬性，我們可以建立動畫，實現簡單的動畫效果。css3動畫的實現需要用到animation屬性並配合關鍵幀 keyframes 使用。1.對需要設定動畫的元素新增animation屬性。2.設定關鍵幀 keyframes animation是所有動畫屬性的簡寫屬性，除了 animati...
CSS 3動畫介紹
原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...