推荐使用<link>标签引入Animate.css，通过CDN在HTML的<head>中加载，再为元素添加animate__animated及具体动画类名；@import可用于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 提供的类名，例如：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

<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 的使用。