转自：https://animate.style/ 

引入使用

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

绑定样式

<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秒之后再执行该动画 -->

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

<span class="span1">animate demo</span>
 
<script> 
let el = document.querySelector(".span1");
el.classList.add("animated", "bounceOutRight") 
</script>

绑定动画结束事件

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