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