css动画库怎么用最方便_通过link引入animate css文件
最方便的方式是通过引入Animate.css并添加animate__animated和具体动画类名。需用CDN引入，元素必须同时含animate__animated与animate__bounce等类；可借内联样式调时长、延迟、循环；触发动画需JS配合，如点击切换类名或IntersectionObserver监听滚动。
最方便的方式是通过 引入 Animate.css，然后直接在 HTML 元素上添加预设的动画类名，无需写一行 CSS 或 JavaScript。
1. 用 CDN 快速引入 Animate.css
在 HTML 的 中加入以下链接（推荐使用官方 CDN）：
注意：Animate.css v4+ 默认需要配合 animate__ 前缀使用，且需手动添加基础类 animate__animated。
2. 正确写法：两个必需类名
要让动画生效，元素必须同时拥有：
-
animate__animated（触发动画机制） -
animate__bounce（或其他具体动画名，如animate__fadeIn、animate__slideInLeft）
示例：
会弹跳的标题
3. 可选增强：自定义持续时间、延迟或重复
通过内联样式或额外类控制行为：
- 修改动画时长：
style="animation-duration: 2s;" - 添加延迟：
style="animation-delay: 0.5s;" - 循环播放：
style="animation-iteration-count: infinite;"
也可以用自定义 CSS 覆盖（推荐用于全局调整）：
.animate__animated { animation-duration: 0.8s; }4. 进阶技巧：触发动画（非一进页面就播）
Animate.css 本身不处理触发逻辑。如需“滚动到才动”或“点击才动”，需配合 JS：
- 简单点击触发：用 JS 切换类名（移除再加回
animate__animated实现重播
） - 滚动触发：可用 ScrollReveal 或原生 IntersectionObserver
）例如点击播放一次：
这个 div 会被摇
