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');  // bounceOutLeft 可替换成你想要的效果
});

改变动画元素的动画参数。

#yourElement {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

API

所有 className 在此

演示

以下动画效果在支持css3 animate的高级浏览器中有效。

<style> .animate-obj { display: inline-block; padding: 0 20px; height: 60px; background-color: #112233; border-radius: 6px; opacity: 0.9; color: #fff; line-height: 60px; text-align: center; } </style>

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');
    });
});