transform，transition 和 animation

简单分析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 ，这个属性可以用来修改旋转元素的基准点。默认是中间