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>