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文件。
<
script
src
=
"dist/js/micron.min.js"
>
|
HTML结构
例如你需要为一个按钮制作bounce动画效果,那么只需要像下面这样编写HTML代码。
|
你还可以通过data-micron-duration
属性来控制CSS3动画的持续时间。micron.js动画库的默认动画持续时间为0.45秒。
|
你可以通过data-micron-timing
属性来控制动画的easing效果。可用的easing效果有:
-
linear
-
ease-in
-
ease-out
-
ease-in-out
|
你可以使用其它元素来触发当前元素的CSS3动画效果。只需要为当前元素添加data-micron-bind="true"
和data-micron-id="name"
属性,其中name
是触发元素的id。例如:
|
初始化插件
通过js代码,你可以为広串联多个交互动作。
|
上面的代码通过getEle()
方法获取要进行动画交互的元素,并通过interaction()
方法传入交互动画类型,然后通过duration()
方法设置动画的持续时间,最后通过timing()
方法来设置动画的easing效果。
例如:
function
myFunc(){
}
//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