css3動畫寫法：
#cricle1
@keyframes
name to
}animation屬性：name規定名稱
duration花費時間
timing-function速度曲線：linear均速，ease 低快低，ease-in低開始，ease-out低結束，ease-in-out低開低完
delay動畫開始前延遲幾秒
animation-fill-mode
: forwards
none
不改變預設行為。
forwards
當動畫完成後，保持最後乙個屬性值（在最後乙個關鍵幀中定義）。
backwards
在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第乙個關鍵幀中定義）。
both
向前和向後填充模式都被應用。
二次動畫的寫法：
#cricle1
@keyframes
name1
50%100% }
/* @keyframes name2
50%100%
} */
可以定義兩個動畫事件。 不過第二個就又開始從原位置開始了。暫時用不上。
主要就是百分比的動畫寫法，百分比可以劃分次數，只要時間總量和百分比寫的沒問題，基本沒問題了。
這裡可以寫很多動畫方式
translate(50
px,100px);
移動，任意方向都行。
transform:
rotate(30
deg)
; 以自己為中心旋轉，引數是度數。
幾個重要屬性：
transform-origin： x-axis y-axis z-axis
transform變換的基點位置。預設情況下，基點位置為元素的中心點。有多種寫法，
幾個很好的教程
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動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...