比 Animation.css 还要炫酷的动画库插件

micron.js是一款可生成炫酷 CSS3 动画的js动画库插件。通过 micron.js 插件，你可以为页面的任意DOM元素添加12种炫酷 CSS3 动画效果。并能通过js代码或html5 data属性来串联各种CSS3动画效果。

 安装

可以通过npm或bower来安装micron.js插件。

npm install webkul-micron
bower install webkul-micron

 使用方法

在页面中引入micron.min.css和micron.min.js文件。

<link href="dist/css/micron.min.css" 

     type="text/css" 

     rel="stylesheet">

<script src="dist/js/micron.min.js">script>

 HTML结构

例如你需要为一个按钮制作bounce动画效果，那么只需要像下面这样编写HTML代码。

<a href="#" class="button" data-micron="bounce">

    这是一个按钮

a>  

你还可以通过data-micron-duration属性来控制CSS3动画的持续时间。micron.js动画库的默认动画持续时间为0.45秒。

<a href="#" class="button" data-micron="bounce" 

   data-micron-duration=".95">这是一个按钮a>  

你可以通过data-micron-timing属性来控制动画的easing效果。可用的easing效果有：

• linear
• ease-in
• ease-out
• ease-in-out

<a href="#" class="button" 

   data-micron="bounce" 

   data-micron-timing="ease-in">

   这是一个按钮

a>  

你可以使用其它元素来触发当前元素的CSS3动画效果。只需要为当前元素添加data-micron-bind="true"和data-micron-id="name"属性，其中name是触发元素的id。例如：

<a href="#" class="button" data-micron="bounce"  

   data-micron-bind="true" 

   data-micron-id="me">

   这是一个按钮

a>

<a href="#" class="button" id="me">

   触发按钮的动画效果

a> 

 初始化插件

通过js代码，你可以为広串联多个交互动作。

micron.getEle("").interaction("")

      .duration("").timing("");

上面的代码通过getEle()方法获取要进行动画交互的元素，并通过interaction()方法传入交互动画类型，然后通过duration()方法设置动画的持续时间，最后通过timing()方法来设置动画的easing效果。

例如：

function myFunc(){
    micron.getEle("#me").interaction("bounce")

          .duration(".45").timing("ease-out");

 }
  
//Call Interaction
myFunc();

 可用的CSS3动画类型

Micron.js支持下面的几种CSS3动画类型，具体效果请参考demo页面。

• micron="shake"
• micron="fade"
• micron="jelly"
• micron="bounce"
• micron="tada"
• micron="groove"
• micron="swing"
• micron="squeeze"
• micron="flicker"
• micron="jerk"
• micron="blink"
• micron="pop"

micron.js 可生成炫酷CSS3动画的js动画库插件的github地址为：https://github.com/webkul/micron