css3實現動畫三種方式：Transform 、Transition 、Animation


Transform：只關於形變，位置變。
Transition：只關於變的過程，包括元素，時間、方式
Animation：是Transform 、Transition的結合。

animation使用方式：如下

關鍵幀：

@keyframes name{
	0%{
		transform:translateY(0);
	}
	30%{
		transform:translateY(-10px);
	}
	50%{
		transform:translateY(-15px);
	}
	60%{
		transform:translateY(0);
	}
	80%{
		transform:translateY(5px);
	}
	100%{
		transform:translateY(15px);
	}
}
 

animation語法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

name : 動畫名稱
duration:
   是動畫持續時間
   取值，如：5s
timing-function:
   動畫變換速率 
   取值：ease;ease-in;ease-in-out;linear;cubic-bezier
delay:
   動畫執行延遲時間
   取值，如：5s
iteration-count：
   動畫播放次數 
 取值：infinite（無限次），n（n次）
direction ：
   動畫播放方向
   取值：normal（正向播放）、alternate（正反反正）、reverse（反向播放）、alternate-reverse（反正正反）
fill-mode ：
    動畫結束時停止狀態
    取值：none(沒有執行動畫前的狀態)、forward（最後一幀）、backward(第一幀）、both(根據animation-direction輪執行forwards和backwards)
play-state：
    動畫播放狀態
    取值： running（播放狀態）、paused（暫停狀態）

做個筆記供隨時查詢，如有不妥之處，歡迎指點喲。