animate.css动画引入
animate.css下载网址：https://github.com/daneden/animate.css要在网站中使用动画.css，只需将样式表放到文档的<head>中，并将动画类与任何动画名称一起添加到元素中。就这样!你有一个CSS动画元素。超棒！
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
也可以使用CDN来引入
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
animate.css动画使用
若要动画元素，请将动画类添加到元素中。您可以包含无限循环的类。<h1 class="animated infinite bounce delay-2s">Example</h1>
可以更改动画的持续时间、添加延迟或更改播放的次数：
.yourElement {
animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
animate.css支持的动画类型
| Class Name | |||
|---|---|---|---|
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 |
heartBeat |
使用js配合使用animate.css动画
在此之前为大家发布一个好消息：为此青锋建站专业开发了JS调用animate.css动画库的万能调用代码，使用非常方便，不需要JS开发能力也可以方便使用，但是只适用于鼠标滑过时，内部执行动画，大家可以去免费下载。1、当你将动画和Javascript结合起来的时候，你可以用动画做很多其他的事情。一个简单的例子：
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
2、还可以检测animate.css动画何时结束：
const element = document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })
3、您可以使用这个简单的JS函数来添加和删除animate.css动画：
function animateCSS(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add('animated', animationName)
function handleAnimationEnd() {
node.classList.remove('animated', animationName)
node.removeEventListener('animationend', handleAnimationEnd)
if (typeof callback === 'function') callback()
}
node.addEventListener('animationend', handleAnimationEnd)
}
以上就是青锋建站给大家分享的animate.css动画引入与使用方法，青锋建站为大家开发了万能调用CSS3动画的JS代码，可去去相关页面下载。青锋建站，提供专业的高品质网站制作服务，包括网站建设，SEO，网络营销，PHP开发，网站建设知名品牌，全国接单，为企业构建强有力的营销平台。
转载请注明来源网址：青锋建站-http://www.sjzphp.com/webdis/animate_css_1055.html
