Animate.css 超強CSS3動畫庫，三行代碼搞定H5頁面動畫特效！

一、基本用法

引入CSS依賴

<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.0/animate.min.css">

在元素的Class中加以下內容

1. animated (必選)
2. infinite (可選) 無限重複
3. bounce (必選) 動畫樣式 參考下方表格
4. delay-2s (可選) 延遲出現

    <div class="animated infinite bounce delay-2s"><h1>Example</h1></div>

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

大功告成，刷新頁面即可查看動畫效果。
基本用法就是這些
官方還給出了一些進階用法如下

---

二、進階用法

動態調用動畫的Javascript例子

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)
}

---

三、在官方例子基礎上，稍加修改以後

由於官方例子用的是querySelector，故只會選中第一個符合要求的元素。
並且持續時間只有slow(2s)、slower(3s)、fast(800ms)、faster(500ms)
故我稍加修改，依然用的原生JS語法(部分ES6)
其中選擇器element改爲選中所有符合要求的元素
新增times參數，可以是2000ms或者2s

/**
 * element: 選擇器 例如 #id | .class | div
 * animationName: 動畫名稱 參考animate.css官網 例如fadeIn
 * times: 持續時間 例如 200ms | 2s
 * callback: 回調函數
 */
function animateCss(element, animationName,times, callback) {
    const nodes = document.querySelectorAll(element)
    nodes.forEach((node => {
        if(times) node.style.setProperty('animation-duration', times, 'important');
        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)
    }))
}

例子

animateCss('.post', 'pulse');
animateCss('.post', 'pulse','200ms');
animateCss('.post', 'pulse','200ms',function(){//do something});

---

Animate.css官網

https://daneden.github.io/animate.css/
https://github.com/daneden/animate.css

---

另外本篇文章也發表在了我的個人主頁，歡迎來查看
https://zzzmh.cn/single?id=59