Less 编写动画

.keyframes(@fx,@fy,@tx,@ty,@name){
    @keyframes @name
    {
      from {
         transform:translate(@fx,@fy);
         opacity:0;
         filter:alpha(opacity=0);
      }
      to {
        transform:translate(@tx,@ty);
        opacity:1;
        filter:alpha(opacity=100);
      }
    }
    @-moz-keyframes @name /* Firefox */
    {
      from {
        -moz-transform:translate(@fx,@fy);
        opacity:0;
        filter:alpha(opacity=0);
      }
      to {
        -moz-transform:translate(@tx,@ty);
        opacity:1;
        filter:alpha(opacity=100);
      }
    }
  
    @-webkit-keyframes @name /* Safari 和 Chrome */
    {
      from {
        -webkit-transform:translate(@fx,@fy);
        opacity:0;
        filter:alpha(opacity=0);
      }
      to {
        -webkit-transform:translate(@tx,@ty);
        opacity:1;
        filter:alpha(opacity=100);
      }
    }
  
    @-o-keyframes @name /* Opera */
    {
      from {
        -o-transform:translate(@fx,@fy);
        opacity:0;
        filter:alpha(opacity=0);
      }
      to {
        -o-transform:translate(@tx,@ty);
        opacity:1;
        filter:alpha(opacity=100);
      }
    }
  }
//固定模式
  .animation(@animation-name, @animation-duration, @animation-timing-function, @animation-delay,
  @animation-iteration-count,
  @animation-direction)
  {
    animation: @arguments;
    /* Firefox: */
    -moz-animation: @arguments;
    /* Safari 和 Chrome: */
    -webkit-animation: @arguments;
    /* Opera: */
    -o-animation: @arguments;
  }
.keyframes(0,-600px,0,0,animation1_1);//初始化

//执行
.testName {
    .animation(animation1_1,2s,ease-in-out,0s,1,normal)
}

<div className='testName'>Less is Cool</div>