文档地址
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>animate动画</title><link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css"></head>
<style>.wrap {display: flex;align-items: center;justify-content: space-evenly;margin-top: 200px;}#one,#two,#three,#four {width: 200px;height: 150px;background: #088;}#one {/* 动画持续时间 */animation-duration: 2s;/*动画延迟时间*/animation-delay: 0s;/* 动画执行次数*/animation-iteration-count: 1;} </style><body><div class="wrap"><div id="one" class="animated fadeInLeft"></div><div id="two" class="animated fadeInUp"></div><div id="three" class="animated fadeInDown"></div><div id="four" class="animated fadeInRight"></div></div><div class="btn">点击动画</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>$(function () {setTimeout(function () {// 新增动画$('#one').addClass('animated fadeOutDown');}, 1000);setTimeout(function () {// 移除动画$('#one').removeClass('fadeOutDown');}, 2000);$.fn.extend({animateCss: function (animationName) {var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';$(this).addClass('animated ' + animationName).one(animationEnd, function () {$(this).removeClass('animated ' + animationName);});}});$('.btn').on('click', function () {$('.wrap').animateCss('bounce');});}); </script></html>