推荐使用标签引入Animate.css，通过CDN在HTML的中加载，再为元素添加animate__animated及具体动画类名；@import可用于CSS文件顶部导入但影响性能。

加载animate.css">

在网页中引入第三方动画库如 Animate.css，可以通过 @import 或 两种方式实现。两者都能成功加载样式，但在使用场景和性能上略有不同。

使用 标签引入 Animate.css（推荐）

这是最常见且推荐的方式，直接在 HTML 文件的 中引入 CDN 链接，无需额外配置。

示例代码：

引入后，可以直接在元素上使用 Animate.css 提供的类名，例如：

欢迎使用动画

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 文件的最前面，否则无效。这种方式会增加主样式表的加载负担，可能影响页面渲染速度。

两种方式的对比与建议

• 是 HTML 级别的资源加载，浏览器可并行下载，性能更好
• @import 是 CSS 内部指令，需等主 CSS 加载后才触发，可能导致样式延迟
• 更利于缓存控制和 SEO，适合大多数项目
• @import 适合构建自定义主题或聚合多个远程样式

基本上就这些。对于普通项目，直接用 引入 Animate.css 最简单高效。不复杂但容易忽略的是基础类 animate__animated 的使用。