0712-2888027 189-8648-0214
微信公眾號

孝感風信網(wǎng)絡(luò)科技有限公司微信公眾號

當前位置:主頁 > 技術(shù)支持 > HTML5/CSS3 > HTML5+CSS3 animations動畫效果插件

HTML5+CSS3 animations動畫效果插件

時間:2016-03-30來源:風信官網(wǎng) 點擊: 1127次
HTML5+CSS3 animations動畫效果插件,有非常豐富的動畫顯示效果!

網(wǎng)址:http://daneden.github.io/animate.css/

以后制作html5+css3的動畫就變得非常簡單啦!

CSS3文件下載地址: https://raw.github.com/daneden/animate.css/master/animate.css

使用方法的說明:https://github.com/daneden/animate.css

鏈接CSS文件:

<head>
  <link rel="stylesheet" href="animate.min.css">
</head>

使用代碼:

$('#yourElement').addClass('animated bounceOutLeft');

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

擴展使用方法:

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        $(this).addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
    }
});


$('#yourElement').animateCss('bounce');

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
熱門關(guān)鍵詞: HTML5+CSS3 animations 動畫 效果 插件
欄目列表
推薦內(nèi)容
熱點內(nèi)容
展開