CSS3 Animation 基于 less 构建的 css3 动画库_html/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：
· 新增部分传参功能，可以自定义动画幅度参数，实现同类型动画不同幅度；
· 传参功能不影响原来上面直接引用，参数都可为空，原来的动画幅度已经设为默认值；

具体动画名和参数说明

动画名参数说明栗子

.bounce(@t; @n)	@t：抖动最小幅度（默认值4px）；@n：动画帧名（默认值bounce）	.bounce(5px; bounceA)
.pulse(@t; @n)	@t：放大幅度（默认值1.05）；@n：动画帧名（默认值pulse）	.pulse(1.5; pulseA)
.shake(@x; @n)	@x：抖动最小幅度（默认值10px）；@n：动画帧名（默认值shake）	.shake(20px; shakeA)
.swing(@d; @n)	@d：旋转最小角度（默认值5deg）；@n：动画帧名（默认值swing）	.swing(5deg; swingA)
.wobble(@d; @n)	@d：摇摆最小幅度（默认值1deg）；@n：动画帧名（默认值wobble）	.wobble(-2deg; wobbleA)
.fadeIn(@x; @y; @n)	@x：x轴移动距离（默认值0）；@y：y轴移动距离（默认值0）；@n：动画帧名（默认值fadeIn）	.fadeIn(-1000px; 0; fadeInA)
.fadeOut(@x; @y; @n)	@x：x轴移动距离（默认值0）；@y：y轴移动距离（默认值0）；@n：动画帧名（默认值fadeOut）	.fadeOut(-1000px; 0; fadeOutA)
.turnInDown(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnInDown）	.turnInDown(700px; turnInDownA)
.turnInUp(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnInUp）	.turnInUp(700px; turnInUpA)
.turnInLeft(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnInLeft）	.turnInLeft(700px; turnInLeftA)
.turnInRight(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnInRight）	.turnInRight(700px; turnInRightA)
.turnOutDown(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnOutDown）	.turnOutDown(700px; turnOutDownA)
.turnOutUp(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnOutUp）	.turnOutUp(700px; turnOutUpA)
.turnOutLeft(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnOutLeft）	.turnOutLeft(700px; turnOutLeftA)
.turnOutRight(@p; @n)	@p：perspective值，元素距视图的距离（默认值600px）；@n：动画帧名（默认值turnOutRight）	.turnOutRight(700px; turnOutRightA)