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動畫
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開發，網站建設知名品牌，全國接單，為企業構建強有力的營銷平臺。
