本文发布于 2023.05.30。

Animate.css 是一个纯 CSS 动画库 ，需要配合 JS 才能自由地让某些元素随时动起来。

官网：https://animate.style/

使用（直接 HTML 中添加）

在 html 文件中引入动画库样式文件。

接着给我们希望运动地元素加上类名 animate__animated，并跟上任何动画名称（不要忘记 animate__ 前缀！）。上述我们给 <h1> 增加了左右摇摆地效果。

注意，因为动画会造成元素偶尔会离开视口范围，导致出现滚动条，所以我们给父元素加了 overflow: hidden 避免这个问题，这也是通常做法。

JS 控制

为了实现更灵活的操作，我们就要借助 JS 了。

修改 HTML 结构：

我们最开始可能会这么写：

这种是没效果的！这是因为 .remove() 和 .add() 是同步代码，代码执行完毕后开始 UI 渲染，对浏览器来说，元素 e 的类名前后并无变化，因此动画不会生效。

不急，下面我们提供了三种让动画生效的方式。

三种让动画生效的方式

方式一：强制刷新

.remove() 后，访问 e.offsetWidth 会触发浏览器强制刷新；再设置 .add() 会在下一次绘制中生效，所以动画会生效。

方式二：下一帧中刷新

.remove() 后，我们将 .add() 操作通过 requestAnimationFrame 回调方式放入下一帧中渲染。

方式三：通过 animationend 事件

这里不再需要每次动画时，先移除动画类名，而是在当次动画结束时移除。与前两种实现方式区别在于，第三种方式会让动画完整结束，而前两种会中断当次动画、并重新开始新的动画。

综合来看，方式三更好一些。

封装可复用方法

我们这里封装一个 animateCSS()——方便复用——用来给某个特定元素指定动画效果：

animateCSS() 接收选择器字符串（CSS Selector）作为参数，运动元素。这里有两点需要注意：

• 我们为元素添加事件时 .addEventListener 使用的是单次生效事件，这样就不必做 .removeEventListener  处理了。

• animationend 事件中，我们使用了 event.stopPropagation() 阻止了事件向上冒泡。

animateCSS() 使用方式如下：

注意事项

• 行内元素不支持动画。在对内联级元素进行动画处理时，可以将元素设置为 display: inline-block

• 大多数 Animate.css 动画将在屏幕上移动元素，并可能会在你的网页产生滚动条。使用 overflow: hidden 属性可以避免网页被撑大出现滚动条的问题。