· 快速开发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 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);
}
LESS-Animation 是一个基于less,集成一些基础动画的库(所包含的动画可以在上面效果预览),直接调用相应的动画mixins即可。
动画帧名和mixin名一致,方便调用。
· 栗子一:引用 bounce 动画,只需在所在元素节点加入 .bounce();
.bounce{
.bounce();
.animation(bounce 1s ease-in-out);
}
· 栗子二:引用 bounceIn 动画,只需在所在元素节点加入 .bounceIn();
.box{
.bounceIn();
.animation(bounceIn 1s linear infinite);
}
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) |
· 20150110 增加turn Entrances(出现)和turn Exits(消失)系列动画
· 20150120 部分新增动画animation的mixin支持传参
参考:https://github.com/daneden/animate.css
阅读详情 -> CSS3 animation by less w3cmark_前端笔记_前端笔记网_为你提供最专业的前端笔记和前端资源.