一个HTML5+CSS3 animations的动画效果插件

一个HTML5+CSS3 animations的动画效果插件

具有非常丰富的动画显示效果!

 

网址: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” rel=”external nofollow” >

</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;

}

文章来源网络,作者:运维,如若转载,请注明出处:https://shuyeidc.com/wp/115058.html<

(0)
运维的头像运维
上一篇2025-02-18 00:01
下一篇 2025-02-18 00:03

相关推荐

发表回复

您的邮箱地址不会被公开。必填项已用 * 标注