@import 不能导入 @keyframes 因为 CSS 规范禁止在 @import 文件中注册 @keyframes，浏览器会忽略其定义，导致动画失效；正确方式是用 、构建时内联或 JS 动态注入。
为什么 @import 不能直接导入 @keyframes
因为 CSS 规范明确禁止在 @import 引入的外部样式表中定义或使用 @keyframes（除非该文件被直接加载为样式表，而非通过 @import 嵌套引入）。浏览器解析时会忽略 @import 文件里的 @keyframes，动画根本不会注册，animation-name 找不到对应规则，控制台也不会报错——只默默失效。
常见错误现象：animation: bounce 1s; 完全没反应，检查元素发现 animation-name 显示为 invalid 或空值；DevTools 的 Styles 面板里看不到任何 @keyframes bounce 定义。
-
@import只能加载规则集（如选择器、属性声明），不触发@keyframes、@font-face、@property等“at-rule 注册行为” - 即使把
@keyframes放在@import文件最开头，也无效 - 嵌套
@import（A 导入 B，B 导入 C）会让问题更隐蔽，C 里的动画照样丢失
真正能复用 keyframes 的三种方式
想集中管理动画帧并跨项目复用，得绕过 @import 的限制。核心思路是：让 @keyframes 进入主样式表的作用域。
- 用
<link rel="stylesheet">替代@import：把动画库单独做成一个 CSS 文件，用 HTML 的<link>标签引入（支持预加载、缓存、并行下载，且@keyframes能正常注册） - 构建时内联：用 PostCSS、Sass 或 Webpack 的
css-loader+postcss-import，在编译阶段把动画文件内容直接插入主 CSS，不是运行时@import - JS 动态注入：把
@keyframes字符串用document.styleSheets[0].insertRule()写入，适合按需加载动画（比如只在模态框打开时注入弹跳动画）
示例（内联方式，Sass）：
@import "animations/bounce"; // 编译后，@keyframes bounce 就在输出 CSS 里了
立即学习“前端免费学习笔记（深入）”；
用 CSS Custom Properties 配合 keyframes 提升灵活性
纯 @keyframes 写死数值（如 transform: translateY(-20px)）会导致复用性差。配合自定义属性可解耦参数，但要注意：CSS 变量不能直接用在 @keyframes 的关键帧声明里（会被忽略），必须靠 JS 或构建工具生成。
- 安全做法：用构建工具将变量值注入到生成的
@keyframes中（例如 Sass 的$bounce-distance: 20px→transform: translateY(-#{$bounce-distance})） - 运行时动态改？不行。修改
:root里的变量，已注册的@keyframes不会重算 - 如果真要 JS 控制，建议放弃
@keyframes，改用element.animate()API，它接受 JS 对象描述动画，天然支持变量
第三方动画库（如 animate.css）的实际接入姿势
像 animate.css 这类库，官网文档写 @import "animate.css"，但实际用的时候必须确认：你用的是它的完整版 CDN 链接（含 @keyframes），还是 npm 包里的源文件（需要构建流程处理）。
- CDN 方式（推荐快速验证）：
<link href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css" rel="stylesheet">—— 这是生效的 - npm + import：若用
@import "~animate.css/animate.min.css"（在 Sass/Less 中），依赖构建工具支持@import解析，否则仍是无效@import - 别漏掉必要类名：animate.css 的动画要加
animate__animated基础类，否则animate__bounce不起作用
复杂点在于，很多人以为复制了一段 @keyframes 到自己的 CSS 里就完事了，但忘了它依赖的 timing-function、fill-mode 或 vendor prefixes（比如旧版 Safari 要 -webkit-keyframes）。直接抄代码，大概率在某个浏览器里卡住不动。
