css3中有三種和動畫相關的屬性：transform、transition、animation。
transform描述元素靜態樣式，transition和animation都能實現動態效果。一般前者配合后者使用。

不同點：
1.  觸發條件不同。transition通常和hover等事件配合使用，由事件觸發。animation則和gif動態圖差不多，立即播放。
2. 循環。 animation可以設定循環次數。
3. 精確性。 animation可以設定每一幀的樣式和時間。tranistion 只能設定頭尾。 animation中可以設置每一幀需要單獨變化的樣式屬性， transition中所有樣式屬性都要一起變化。
4. 與javascript的交互。animation與js的交互不是很緊密。tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果，天作之合，比之前只能用js時爽太多。
結論：
1. 如果要靈活定制多個幀以及循環，用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;}
}