CSS3 有3種和動畫相關的屬性：transform, transition, animation。其中 transform 描述了元素靜態樣式。而transition 和 animation 卻都能實現動畫效果。所以transform 常常配合後兩者使用 一、transform 描述的是元素靜態樣 ...
CSS3 有3種和動畫相關的屬性：transform, transition, animation。其中 transform 描述了元素靜態樣式。而transition 和 animation 卻都能實現動畫效果。所以transform 常常配合後兩者使用
一、transform 描述的是元素靜態樣式
transform屬性應用於元素的2D或3D轉換。這個屬性允許你將元素旋轉，縮放，移動，傾斜等。 必須是滑鼠移上或者點擊執行屬性變化，滑鼠離開屬性回歸。說到底就是屬性不會變化。配合-webkit-transition: 0.3s;transition: 0.3s;才會有動畫的效果，否則會很生硬。
旋轉：rote(30deg) 水平面以元素中心旋轉多少度；
rotateX(angle) 定義沿著 X 軸的 3D 旋轉；
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉；
位移 ：translate(x,y) 定義 2D 轉換;
translate3d(x,y,z) 定義 3D 轉換;
縮放：scale(x,y) 定義 2D 縮放轉換;
scale3d(x,y,z) 定義 3D 縮放轉換;
二、實現動畫效果的：transition animation
1、transition
transition 屬性是一個簡寫屬性，用於設置四個過渡屬性
transition: property duration timing-function delay;
過渡的屬性 ，完成過度效果需要時間 ， 速度曲線， 延遲時間
.one1{transition: width 3s linear 2s;} .one1:hover{width:300px;}
transition定義了動畫的屬性、時間、速度曲線以及延遲時間 ；通常和hover等事件配合使用，由事件觸發。
2、animation
animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation的使用必須結合@keyframes animation-name使用
@keyframes move{
form{ left:0px;} to{ left:200px;}
}
在需要動畫的元素上面添加動畫 div{animation:move 5s infinite;}
animation: name duration timing-function delay iteration-count direction;
動畫名稱，動畫執行時間，速度曲線，動畫延遲時間，播放次數，是否反向播放
animation可以設定每一幀的樣式和時間
區別：
1. 觸發條件不同。transition通常和hover等事件配合使用，由事件觸發。animation則立即播放。
2. 迴圈。 animation可以設定迴圈次數。
3. 精確性。 animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化。
4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天作之合，比之前只能用js時爽太多。
