animate.css使用文档

step1：下载/引入

• 链接：https://daneden.github.io/animate.css/

 

• 或者使用npm：

npm install animate.css --save

• 或者使用yarn：

 yarn add animate.css

• CDN：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

 

 

step2：绑定样式

<h1 class="animated bounceOutRight">animate demo</h1>

可以通过添加：infinite 来设置为一直循环：

<h1 class="animated infinite bounceOutRight">animate demo</h1>

设置延时执行：

<h1 class="animated infinite bounceOutRight delay-2s">animate demo</h1>

<!-- delay-2s  表示2秒之后再执行该动画 -->

 

step3：通过js控制样式

<span class="span1">animate demo</span>

<script>

let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")

</script>

这样也可以给指定的元素绑定动画效果，也可以使用函数封装，然后通过事件触发。

 

step4：绑定动画结束事件

<span class="span1">animate demo</span>

<script>

let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight")

// 这里给元素绑定动画执行完毕之后的事件
el.addEventListener('animationend', function() { eventEnd() })

function eventEnd() {
    el.classList.remove("bounceOutLeft")
}

</script>