参考https://github.com/daneden/animate.css 最近发现animite.css做动画比较省力，本着不重复做轮子的想法。学习了一下，简单快捷易上手。
下面通过demo直接演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>animate学习demo</title> <link rel="stylesheet" href="animate.css" type="text/css"> <style> /*demo2*/ .yourElement { /*动画持续时间*/ animation-duration: 5s; /*页面渲染好后，动画开始的时间，即等待5s开始动画*/ animation-delay: 2s; /*动画播放次数*/ animation-iteration-count: infinite; } </style> </head> <body> <!--demo1--> <h1 class="animated infinite bounce delay-2s">这是第一种使用方式</h1> <!--demo2--> <h1 class="animated bounce yourElement">这还是第一种使用方式，但修改了默认属性</h1> <!--demo3--> <h1 class="demo3">这是第二种使用方式，js引入</h1> <script> // 选取第一个元素，添加样式 const demo3 = document.querySelector('.demo3') demo3.classList.add('animated', 'bounceOutLeft','infinite') </script> <!--demo4--> <h1 class="demo4">还可以设置监听函数，在动画结束后，执行回调函数</h1> <script> const demo4 = document.querySelector('.demo4') demo4.classList.add('animated', 'bounceOutRight') //设置监听，执行回调函数 demo4.addEventListener('animationend', function() { console.log('demo4动画结束，回调了！') }) </script> <!--demo5--> <h1 class="demo5">还可以设置js函数，用来添加和删除animations</h1> <script> // 自定义函数 //element为要选择的元素，animationName为要添加的动画名称，callback为回调函数名 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() } // 设置监听，动画结束后，执行handleAnimationEnd node.addEventListener('animationend', handleAnimationEnd) } // animateCSS('.demo5', 'bounce') // or animateCSS('.demo5', 'bounce', function() { // Do something after animation console.log('这是demo5') }) </script> </body> </html>