css3中有三種和動畫相關的屬性：transform洪灯、transition劈猿、animation仇矾。
transform描述元素靜態(tài)樣式，transition和animation都能實現動態(tài)效果拍棕。一般前者配合后者使用晓铆。
不同點：
1. 觸發(fā)條件不同勺良。transition通常和hover等事件配合使用，由事件觸發(fā)尤蒿。animation則和gif動態(tài)圖差不多郑气，立即播放。
2. 循環(huán)腰池。 animation可以設定循環(huán)次數尾组。
3. 精確性。 animation可以設定每一幀的樣式和時間示弓。tranistion 只能設定頭尾讳侨。 animation中可以設置每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化奏属。
4. 與javascript的交互跨跨。animation與js的交互不是很緊密。tranistion和js的結合更強大囱皿。js設定要變化的樣式勇婴，transition負責動畫效果，天作之合嘱腥，比之前只能用js時爽太多耕渴。
結論：
1. 如果要靈活定制多個幀以及循環(huán)，用animation.
2. 如果要簡單的from to 效果齿兔，用 transition.
3. 如果要使用js靈活設定動畫屬性橱脸，用transition.
- transition過渡屬性
語法：transition: property duration timing-function delay;
屬性：
1.transition-proprety:設置過渡效果的css屬性的名稱(none || all || proprety如width)
2.transition-duration:過渡效果完成的時間
3.transition-timing-function:速度效果的速度曲線(linear || ease || ease-in || ease-out || ease-in-out || cubic-bezier(n,n,n,n))
4.transition-delay:過渡效果何時開始
使用方法：
a{
width:100px;
transition:all 3s;
}
a:hover{
width:300px;
}
- animation幀動畫
語法：animation: name duration timing-function delay iteration-count direction;
屬性：
1.animation-name:需要綁定到選擇器的keyframe名稱
2.animation-duration:完成動畫的時間
3.animation-timing-function:動畫的速度曲線
4.animation-delay:動畫開始之前的延遲
5.animation-iteration-count:動畫播放次數( n || infinite )
6.animation-direction:是否輪流反向播放( normal || alternate )
使用方法：
div{
animation:aaa 3s ease 1s 3 alternate;
-webkit-animation:aaa 3s ease 1s 3 alternate;
}
@keyframes aaa{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes aaa {
from {left:0px;}
to {left:200px;}
}
