CSS3 Animation css3 animation library built on less_html/css_WEB-ITnose

Advantages of LESS animation

· Rapid development of css3 animation

· Using less mixins writing method, no redundant css will be generated

· Already added Mainstream browser prefixes to ensure maximum compatibility

· LESS-Animation Some mixins support passing parameters and customizing animation amplitude

(PS: sublime’s less2css plug-in may not support compiling some of this library For new writing methods, it is recommended to use official less compilation, Koala, front-end construction tools, etc. Communication group: 145423956)

Usage

This less file mainly contains two functions: LESS-Prefixer. and LESS-Animation.

·Download the _animation.less file, git address:

git@github.com:w3cmark/css3.git

　

·Introduced in the main less file _animation.less

@import "_animation.less";

　

LESS-Prefixer

LESS-Prefixer is a set of LESS mixins that can This allows you to remove the prefixes for writing in each browser when writing CSS3, simplifying code writing.

How to use

· If you write 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;}

　

· Writing after introducing _animation.less:

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

　

Supported attributes

.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 directly references

LESS-Animation is a library based on less that integrates some basic animations (the included animations can be found above Effect preview), just call the corresponding animation mixins directly.

The animation frame name is consistent with the mixin name, making it easy to call.

· Chestnut 1: To quote the bounce animation, just add .bounce() to the element node;

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

· Chestnut 2: To quote the bounceIn animation, just add You need to add .bounceIn();

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

mixin parameter reference

ps:
· Added some parameter passing functions, you can Customize animation amplitude parameters to achieve different amplitudes for the same type of animation;
· The parameter passing function does not affect the original direct reference above, the parameters can be empty, and the original animation amplitude has been set to the default value;

Specific animation name and parameter description

动画名 参数说明 栗子

.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)

Update log

· 20150110 Added turn Entrances (appearance) and turn Exits (disappearance) series animations

· 20150120 Some new animation animation mixins support passing parameters

Online preview effect http://www.w3cmark.com/animation/