Animate.css 是一个有趣的，跨浏览器的 css3 动画库，内置了很多典型的 css3 动画，兼容性好使用方便。
安装
使用 npm 安装：
$ npm install animate.css --save
或者使用 Yarn 安装：
$ yarn add animate.css
将其导入文件：
import 'animate.css';
或者使用 CDN 将其直接添加到网页：
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
基本用法
安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：
<h1 class="animate__animated animate__bounce">An animated element</h1>
使用@keyframes
可以直接使用提供的动画keyframes。它提供了一种灵活的方式来将 Animate.css 用于当前的项目，而无需重构 HTML 代码。
例子：
.my-element {
display: inline-block;
margin: 0 0.5rem;
animation: bounce; /* referring directly to the animation's @keyframe declaration */
animation-duration: 2s; /* don't forget to set a duration! */
}
请注意，某些动画依赖于animation-timing动画类上设置的属性。
评论