在css3中，一般建立動畫需要使用animation實現，使用簡寫屬性，將動畫與div
元素繫結。
animation可用於設定六個動畫屬性：
transform(變形)，transition(過渡)，animation(動畫)
一、transform：直接改變大小和位置，顯示改變的結構，沒有過渡和變形的時間
transform
:rotate
(360deg)
scale
(-1.2,1.2)
translate
(100px,50px)
skew
(45deg,45deg)
利用css變形屬性可以將對應的屬性旋轉對應的角度，可以順時針旋轉，逆時針
（負值）旋轉，可以3d旋轉，3d旋轉可以分別繞x軸y軸z軸旋轉；
（2）縮放scale
負值為先翻轉，再縮放對應的倍數，可以在x、y、z上做縮放
（3）位移translate
可以在x、y軸上做平移，或者同時在x、y、z軸上做平移
（4）斜切skew
能夠讓元素傾斜顯示，本質上是可以讓x、y軸傾斜一定程度
二、transition（過渡）：會有乙個形變的過程，會有過渡和形變時間
eg:
.first
.first:hover
同樣的也是乙個過渡的過程，引入了幀的概念，定義keyframes動畫，然後繫結
乙個或者多個動畫。transition有點像他的簡化版，animation也可以實現
transition變化某個屬性的功能
（控制某物體暫停或執行動畫）
transition和animation主要區別在哪？
transition也可以看做animation的縮略版，他們實現的功能有重複的地方，比如說要實現某個div的寬度有30rem變到20rem,兩者都可以實現。
例項一：實現上下跳動小圖示動效
.hot
@keyframes run
50%100
}
btn
@keyframes changecolor
49.9%
50%100%
}
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動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...