应避免用@import加载动画库，因其会阻塞CSS解析；推荐按需导入animate.css的特定动画文件或自建轻量动画库以减少体积和重绘压力。

直接用 @import 加载动画库会拖慢首屏

浏览器遇到 @import 会阻塞后续 CSS 解析，哪怕它在文件末尾。动画库通常几百 KB，全量引入又只用其中两三个动效，纯属浪费带宽和渲染时间。

实操建议：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 别在主 style.css 里写 @import url('animate.css');
• 改用 link rel="stylesheet" 动态加载，或更推荐——按需编译
• 如果用 PostCSS 或 Vite，优先走构建时导入，而非运行时 @import

用 animate.css 的按需导入（v4+）

v4 开始官方支持 ES 模块导出，能真正 tree-shaking。但很多人仍习惯引入整个 CSS 文件，错过体积优化。

常见错误现象：引入 animate.min.css 后发现打包体积没变，动效却卡顿——其实是整包加载 + 无作用域污染导致重绘压力大。

立即学习“前端免费学习笔记（深入）”；

实操建议：

• 安装：npm install animate.css
• 只导入需要的动画：import 'animate.css/animate.css';（基础类名）
• 再单独 import 具体动画：import 'animate.css/source/fading_entrances/fadeIn.css';
• 注意路径中的 source/ 是 v4+ 的源码目录，不是 animate.css 根目录

Vite / Webpack 中 CSS 类名冲突与作用域问题

动画类名如 animate__fadeIn 是全局的，和你项目里的 .fade-in 冲突、或被 PurgeCSS 误删，很常见。

使用场景：组件级动效（比如弹窗入场）、SSR 渲染、Tailwind 项目混用。

实操建议：

• 不要依赖 PurgeCSS 自动保留 animate__* 类——它不认识这种双下划线命名
• 在 Tailwind 配置中显式 safelist：safelist: [/^animate__/]
• 若需局部作用域，用 :is() 或 wrapper class 包裹，例如：<div class="my-modal animate__animated animate__fadeIn">，然后 CSS 中限定：<code>.my-modal.animate__animated { ... }

  自建轻量动画库比引入 animate.css 更省？

  如果你只用 fadeIn、slideInUp、zoomOut 这三四个，全量 animate.css（~40KB gzip）确实杀鸡用牛刀。

  性能影响：少一个 HTTP 请求、少解析 300+ 条 keyframes 规则，对低端设备首帧意义明显。

  实操建议：

  • 复制对应 @keyframes 和基础类定义到你自己的 animations.css
  • 务必保留 animation-duration、animation-fill-mode: both，否则动画结束后元素样式丢失
  • 别漏掉 -webkit- 前缀（尤其 iOS Safari 15.4 之前仍需）
  • 示例最小 fadeIn：

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .fadeIn {
      animation-name: fadeIn;
      animation-duration: 0.3s;
      animation-fill-mode: both;
    }

  关键点在于：动画库不是“引入即用”，而是“选中即载”。很多团队卡在“以为用了按需，其实还是全量 import”，或者把构建时导入写成了 HTML 里 link，这两处一错，体积和性能就白优化了。