在less上写css3动画

来源：互联网发布：数据库的主要特点是编辑：程序博客网时间：2024/05/16 10:51

一共四个步骤：
1、定义动画动作：

.slide-in(@y-begin,@y-end,@name){  @keyframes @name{    from {      transform: translateY(@y-begin);      opacity: 0    }    to {      transform: translateY(@y-end);      opacity: 1    }  }  @-webkit-keyframes @name{    from {      transform: translateY(@y-begin);      opacity: 0    }    to {      transform: translateY(@y-end);      opacity: 1    }  }  @-moz-keyframes @name{    from {      transform: translateY(@y-begin);      opacity: 0    }    to {      transform: translateY(@y-end);      opacity: 1    }  }  @-o-keyframes @name{    from {      transform: translateY(@y-begin);      opacity: 0    }    to {      transform: translateY(@y-end);      opacity: 1    }  }}

2、初始化动画：

.slide-in(-60px,0px,logo);//Y起始坐标，Y终止坐标，动画名。

3、定义动画属性：

.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state){  -webkit-animation: @arguments;  -moz-animation: @arguments;  -ms-animation: @arguments;  -o-animation:  @arguments;  animation: @arguments;}/*参数分别为：调用的动画名（也就是第二步的结果），动画持续时间，动画速度曲线，动画延迟时间（多久后开始执行动画），动画结束后的位置*/

4、使用动画：

p{    opacity: 0;     .animation(logo,0.5s,cubic-bezier(.83, 1.68, .26, .85),0.7s,forwards);}/*动画从0.7秒后开始执行，从P的初始位置Y轴的-60PX向初始位置移动，持续时间为0.5s，动画结束后的位置是动画定义的最终位置。*/

0 0