IT入门 > 图文教程 > CSS教程 >

LESS动画优点

· 快速开发css3动画

· 采用less mixins写法，不会生成冗余css

· 已加入主流浏览器前缀，保证最大兼容性

· LESS-Animation 部分mixins支持传参，自定义动画幅度

（PS：sublime的less2css插件可能不支持编译本库的一些新写法，建议使用官方less编译、考拉、前端构建工具等方式编译。交流群：145423956）

使用方法

本less文件主要包含两个功能：LESS-Prefixer和LESS-Animation。

· 下载 _animation.less 文件，git地址：

git@github.com:w3cmark/css3.git

· 在主less文件引入_animation.less

@import "_animation.less";

LESS-Prefixer

LESS-Prefixer是一组LESS mixins，可以让你在写css3时，去掉书写各个浏览器的前缀，简化代码书写。

如何使用

· 假如你写css3的transition：

div{
  -webkit-transition:all 0.2s ease-out;
  -o-transition:all 0.2s ease-out;
  -ms-transition:all 0.2s ease-out;
  -moz-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}

· 引入 _animation.less 后的写法：

div{
  .transition(all 0.2s ease-out);
}

支持的属性

.transition(@arg)

.transition-delay(@delay)

.transition-duration(@duration)

.transition-property(@property)

.transition-timing-function(@function)

.transition-delay(@delay)

.transition-delay(@delay)

.transform(@arg)

.transform-origin(@args)

.transform-style(@style)

.rotate(@deg)

.scale(@factor)

.translate(@x,@y)

.translate3d(@x,@y,@z)

.translateHardware(@x,@y)

.animation(@arg)

.animation-delay(@delay)

.animation-direction(@direction)

.animation-duration(@duration)

.animation-fill-mode(@mode)

.animation-iteration-count(@count)

.animation-name(@name)

.animation-play-state(@state)

.animation-timing-function(@function)

.flex(@arg)

.flexbox()

.opacity(@number)

.box-shadow(@arg)

.box-sizing(@arg)

.border-color(@arg)

.border-image(@arg)

.border-radius(@arg)

.background-origin(@arg)

.background-clip(@arg)

.background-size(@arg)

.columns(@args)

.column-count(@count)

.column-gap(@gap)

.column-width(@width)

.column-rule(@args)

.gradient(@default, @start, @stop)

.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2)

.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3)

.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4)

.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2)

.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3)

.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4)

LESS-Animation

mixin直接引用

LESS-Animation 是一个基于less，集成一些基础动画的库（所包含的动画可以在上面效果预览），直接调用相应的动画mixins即可。

动画帧名和mixin名一致，方便调用。

· 栗子一：引用 bounce 动画，只需在所在元素节点加入 .bounce();

.bounce{
  .bounce();
  .animation(bounce 1s ease-in-out);
}

· 栗子二：引用 bounceIn 动画，只需在所在元素节点加入 .bounceIn();

.box{
  .bounceIn();
  .animation(bounceIn 1s linear infinite);
}

mixin传参引用

ps：
· 新增部分传参功能，可以自定义动画幅度参数，实现同类型动画不同幅度；
· 传参功能不影响原来上面直接引用，参数都可为空，原来的动画幅度已经设为默认值；

具体动画名和参数说明

更新日志

· 20150110 增加turn Entrances（出现）和turn Exits（消失）系列动画

· 20150120 部分新增动画animation的mixin支持传参

参考：https://github.com/daneden/animate.css

阅读详情 -> CSS3 animation by less w3cmark_前端笔记_前端笔记网_为你提供最专业的前端笔记和前端资源.