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

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/