在less上写css3动画

最新推荐文章于 2022-02-12 20:01:36 发布

面具哥布林

最新推荐文章于 2022-02-12 20:01:36 发布

阅读量7.9k

点赞数

文章标签： less css3 动画

本文链接：https://blog.youkuaiyun.com/oak160/article/details/54406509

版权

本文介绍了如何通过Less来编写CSS3动画，包括定义动画动作、初始化动画、设置动画属性和应用动画的四个步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一共四个步骤：
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，动画结束后的位置是动画定义的最终位置。*/