簡單分析transform，transition 和 animation

1. transfrom transfrom
   可用於移動(translate)、旋轉(rotate)、放縮(scale)、傾斜(skew)等。只有變換的結果，沒有具體的過程。可用獲取游標時css變化，或者操作class。
   程式碼如下：

   transform: translate(-50%, -50%);(特別注意 50%是相對於自身的寬高決定的。) 	
   transform: rotate(180deg); 	
    transform: scale(1.2); 	 
    transform:   skew(45deg, 45deg);
    
   

2. transition transition 用於線性變化。通俗的講可以把動畫從0% 到
   100%的結果用相對平滑的效果展示，區別於transform直接展示結果。用法如下： transition:
   transition-property transition-duration transition-timing-function
   transition-delay。 例如：

   transition: all .3s ease-in-out 0s; all 代表所有涉及到變化的屬性。

3. animation animation 代表動畫。相對於transition針對於起始點和終點的線性變化，animation 更看重過程，主要配合@keyframes使用。其中用

	@keyframes animation-name { 		
		   from { } 		
		   to { } 	
	  } 

可以很好地模擬transition。
用法如下：
animation: animation-name
animation-duration animation-timing-function animation-delay
animation-iteration-count animation-direction。
animation-iteration-count 代表動畫應該播放的次數，
animation-direction代表是否應該輪流反向播放動畫，具體程式碼如下：

 @keyframes
    fadeInRight {
        0% {
          opacity: 0;
          transform:scale(1.2) rotate(360deg);
        }
        100% {
          opacity: 1;
          transform:scale(1) rotate(0deg);
        }   
      } 
      animation: fadeInRight .3s ease-in-out 0s infinite;

最後要特別說明的是transform-origin ，這個屬性可以用來修改旋轉元素的基準點。預設是中間