animate.css
Css 3 动画样式。代码来自：https://github.com/daneden/animate.css
使用说明
官方教程
通过 link 打包引用或使用 seajs.use 引入样式文件，然后绑定对应的 className。
seajs.use(['jquery', 'alice/animate/1.0.0/animate.css'], function($) {
$('#test').addClass('animated bounceOutLeft');
});
改变动画元素的动画参数。
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
API
所有 className 在此
演示
以下动画效果在支持css3 animate的高级浏览器中有效。
bounceIn
点击触发动画 bounceIn
seajs.use(['jquery', 'index.css'], function($) {
$('#trigger1').click(function() {
$('#test1').addClass('animated bounceIn');
});
});
fadeInUp
点击触发动画 fadeOutRightBig
seajs.use(['jquery', 'index.css'], function($) {
$('#trigger2').click(function() {
$('#test2').addClass('animated fadeInUp');
});
});
rotateInUpRight
点击触发动画 rotateInUpRight
seajs.use(['jquery', 'index.css'], function($) {
$('#trigger3').click(function() {
$('#test3').addClass('animated rotateInUpRight');
});
});
tada
点击触发动画 tada
seajs.use(['jquery', 'index.css'], function($) {
$('#trigger4').click(function() {
$('#test4').addClass('animated tada');
});
});
shake
点击触发动画 shake
seajs.use(['jquery', 'index.css'], function($) {
$('#trigger5').click(function() {
$('#test5').addClass('animated shake');
});
});