css modules中动画模块化关键在于安全拼接模块类名与全局动画类名：模块类必须通过styles.xxx访问，全局类（如animate__fadein）需作为纯字符串拼接，不可加点或引号；animate.css等第三方库须避免被css modules处理，自定义@keyframes名保持原始不变，动画属性中引用原始名。
直接用 CSS Modules 写动画本身是可行的，但真正要“模块化地使用动画效果”，关键不在写法，而在如何把动画类名（比如 animate__bounce）和模块化类名安全拼接，同时避免样式丢失或作用域错乱。
为什么不能直接在 className 里混写模块类 + 全局动画类？
常见错误是这样写：
import styles from './Card.module.scss';
<div classname="animate__bounce {styles.card}">...</div>
这会导致 animate__bounce 被当作字面量字符串处理，但浏览器实际需要的是一个有效的类名（不带引号、不带点号）。更严重的是：如果项目启用了 CSS Modules 的严格模式（如 Webpack 的 exportLocalsConvention: 'camelCaseOnly'），全局类名甚至可能被误解析为 undefined。
✅ 正确做法是明确区分两类来源：
- CSS Modules 类必须通过
styles.xxx访问，再拼进字符串 - 全局动画类（如 Animate.css、自定义
@keyframes）必须作为纯字符串字面量，不加点、不加引号包裹 - 两者用空格连接，不是用逗号或数组
如何安全引入并使用 Animate.css 这类第三方动画库？
Animate.css 是典型的全局 CSS 库，它的类名（如 animate__fadeIn）不会经过模块化处理。你必须确保它被当作普通 CSS 加载，而不是被 css-loader?modules 拦截。
推荐配置方式（以 Webpack 为例）：
- 在
webpack.config.js中单独配一条规则，匹配/animate\.css$/，且 不启用modules - 或者改用
animate.min.css的 CDN 链接，在public/index.html中通过<link>引入（最简单，无构建干扰） - 在组件中，直接把动画类写成字符串：
className={`${styles.card} animate__fadeIn`}
⚠️ 注意：不要写成 className={`${styles.card} .animate__fadeIn`} —— 点号会变成类名的一部分，浏览器找不到这个类。
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
怎么让自定义 @keyframes 动画也支持模块化？
CSS Modules 默认不处理 @keyframes，它只转换类选择器。所以即使你在 .module.scss 里写了：
@keyframes slideIn {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: translateX(0); }
}
.slideIn {
animation: slideIn 0.3s ease-out;
}
编译后，slideIn 类会被哈希化（如 Card_slideIn__abc123），但 @keyframes slideIn 仍保持原名——这没问题；真正要注意的是：动画名在 animation 属性里必须写原始名，不能写哈希后的。
所以以下写法是安全的：
import styles from './Card.module.scss';
<div classname="{styles.slideIn}">...</div>
但如果你把 @keyframes 名也改成带哈希的（比如用 JS 动态生成），就脱离了 CSS Modules 的能力范围，得靠额外工具（如 styled-components 或 CSS-in-JS）来解决。
动态控制动画类名时容易漏掉的细节
比如用 useState 控制入场动画开关：
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
if (isVisible) {
const timer = setTimeout(() => setIsVisible(true), 100);
return () => clearTimeout(timer);
}
}, []);
return <div classname="{`${styles.card}" :>...</div>;
这里有两个易错点：
- 空格处理：当条件为 false 时，结果是
"card_hash__xxx "（末尾多一个空格），虽然不影响渲染，但可读性差；建议用模板字符串内联三元，或用clsx库 - 动画重播：CSS Modules 类名不变，但全局动画类每次添加都会触发重播；若需“只播一次”，得配合
animation-fill-mode: forwards和状态清理逻辑
最常被忽略的其实是调试阶段：DevTools 里看到的类名是哈希化的（如 Card_card__xyz789），而你写的 @keyframes 名仍是原始的 slideIn —— 这种“一半模块化、一半全局”的混合状态，必须心里有数，否则查动画失效时会绕弯路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
