推荐使用<link>标签引入Animate.css，通过CDN在HTML的<head>中加载，再为元素添加animate__animated及具体动画类名；@import可用于CSS文件顶部导入但影响性能。
css">
在网页中引入第三方动画库如 Animate.css，可以通过 @import 或 <link> 两种方式实现。两者都能成功加载样式，但在使用场景和性能上略有不同。
使用 <link> 标签引入 Animate.css（推荐）
这是最常见且推荐的方式，直接在 HTML 文件的 <head> 中引入 CDN 链接，无需额外配置。示例代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
引入后，可以直接在元素上使用 Animate.css 提供的类名，例如：
<h1 class="animate__animated animate__bounce">欢迎使用动画</h1>Animate.css 4.0+ 版本要求必须添加 animate__animated 基础类，再配合具体动画类使用。
使用 @import 在 CSS 中引入
如果你希望统一管理样式文件，可以在自己的 CSS 文件顶部使用 @import 导入远程资源。示例：
立即学习“前端免费学习笔记（深入）”；
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
.my-element {
animation-duration: 2s;
animation-iteration-count: infinite;
}
注意：@import 必须写在 CSS 文件的最前面，否则无效。这种方式会增加主样式表的加载负担，可能影响页面渲染速度。
两种方式的对比与建议
- <link> 是 HTML 级别的资源加载，浏览器可并行下载，性能更好
- @import 是 CSS 内部指令，需等主 CSS 加载后才触发，可能导致样式延迟
- <link> 更利于缓存控制和 SEO，适合大多数项目
- @import 适合构建自定义主题或聚合多个远程样式
基本上就这些。对于普通项目，直接用 <link> 引入 Animate.css 最简单高效。不复杂但容易忽略的是基础类 animate__animated 的使用。
