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;