基础用法
- 在
<head>
中引入动画样式
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
- 将
animated
类添加到你想要呈现动画的 html 标签中。如果你想要动画循环,可在该标签中增加infinite
类。 - 最后,您需要在该标签中添加以下类之一:
类名 |
---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
swing |
tada |
wobble |
jello |
bounceIn |
bounceInDown |
bounceInLeft |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutDown |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeIn |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeInUpBig |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeft |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
fadeOutUpBig |
flipInX |
flipInY |
flipOutX |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpLeft |
rotateOutUpRight |
hinge |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |
完整示例:
<h1 class="animated infinite bounce">Example</h1>
高级用法
要在您的网站中使用 animate.css ,只需在文档的 <head>
中引入样式表,并将 animated
类和任何一个动画类添加到元素。
当您将 Animate.css 与 jQuery 结合使用或添加您自己的 CSS 规则时,您可以使用 jQuery 动态添加动画:
$('#yourElement').addClass('animated bounceOutLeft');
您还可以检测动画结束的时间:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
注意:最多只能执行一次事件处理程序时使用 jQuery.one()
。更多信息请参看这里。
您还可以扩展 jQuery 来添加一个自定义动画功能:
$.fn.extend({
animateCss: function (animationName) {
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
this.addClass('animated ' + animationName).one(animationEnd, function() {
$(this).removeClass('animated ' + animationName);
});
return this;
}
});
然后使用你的自定义动画功能:
$('#yourElement').animateCss('bounce');
您还可以更改动画的持续时间,添加延迟或更改播放次数:
#yourElement {
-vendor-animation-duration: 3s;
-vendor-animation-delay: 2s;
-vendor-animation-iteration-count: infinite;
}
注意:请务必将以上 CSS 中的 “vendor” 替换为适用的浏览器前缀(如 webkit,moz 等)
2017-07-30