less之css3动画大方溢彩

标签：

.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;
}



/*初始动画*/
  //banner--------------------------------------------------
.keyframes(0,-600px,0,0,animation1_1);//banner动画1
.keyframes(-421px,0,0px,0,animation1_2);//banner动画2,底部左1
.keyframes(183px,0,0px,0,animation1_3);//banner动画3，底部左2
//第二屏-------------------------------------------------------------
.keyframes(0,-326px,0px,0,animation2_1);//第一行
.keyframes(0,40px,0px,0,animation2_2);//第二行
//第三行
.keyframes(-610px,0,0px,0,animation2_3);
.keyframes(670px,0px,0px,0,animation2_4);
//第三屏-------------------------------------------------------------
.keyframes(0px,-300px,0px,0,animation3_1);
.keyframes(-700px,0,0px,0,animation3_2);
.keyframes(1145px,0,0px,0,animation3_3);
//第四屏
.keyframes(0px,-383px,0px,0,animation4_1);
.keyframes(0,-390px,0px,0,animation4_2);
.keyframes(-800px,0,0px,0,animation4_3);
.keyframes(800px,0,0px,0,animation4_4);
//第五屏

.keyframes(0px,-383px,0px,0,animation5_1);
.keyframes(0,390px,0px,0,animation5_2);
.keyframes(-800px,0,0px,0,animation5_3);
.keyframes(800px,0,0px,0,animation5_4);

/*执行动画过渡*/
  //banner---------------------------------------------
.animation .animation1_1{
  .animation(animation1_1,2s,ease-in-out,0s,1,normal)
}
.animation .animation1_2{
  .animation(animation1_2,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation1_3{
  .animation(animation1_3,2.5s,ease-in-out,0s,1,normal)
}

//第二屏-----------------------------------------------
.animation .animation2_1{                     //第一行
  .animation(animation2_1,1s,ease-in-out,0s,1,normal)
}
.animation .animation2_2{    //第二行
  .animation(animation2_2,3s,ease-in-out,0s,1,normal)
}
//第三行
.animation .animation2_3{
  .animation(animation2_3,3.5s,ease-in-out,0s,1,normal)
}
.animation .animation2_4{
  .animation(animation2_4,3.5s,ease-in-out,0s,1,normal)
}
//第三屏----------------------------------------------------------
.animation .animation3_1{          //第一行
  .animation(animation3_1,2.5s,ease-in-out,0s,1,normal)
}
//第二行
.animation .animation3_2{          //左边
  .animation(animation3_2,3s,ease-in-out,0s,1,normal)
}
//右边
.animation .animation3_3{          //左边
  .animation(animation3_3,3s,ease-in-out,0s,1,normal)
}
//第四屏-----------------------------------------------------------------
.animation .animation4_1{
  .animation(animation4_1,2s,ease-in-out,0s,1,normal)
}
.animation .animation4_2{
  .animation(animation4_2,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation4_3{
  .animation(animation4_3,3s,ease-in-out,0s,1,normal)
}

//第五屏
.animation .animation5_1{
  .animation(animation5_1,1.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_2{
  .animation(animation5_2,1.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_3{
  .animation(animation5_3,2.5s,ease-in-out,0s,1,normal)
}
.animation .animation5_4{
  .animation(animation5_4,2.5s,ease-in-out,0s,1,normal)
}

less之css3动画大方溢彩

标签：

原文地址：http://blog.csdn.net/xiaomogg/article/details/47722589