Emotion的keyframes返回的是标识对象而非字符串，必须通过插值（如animationName: ${spin}）在css/styled中使用；不可硬编码动画名或拼接字符串；支持闭包传参但需避免重复创建；SSR需配合CacheProvider和createCache；哈希去重依赖内容一致，非变量名。
Emotion的keyframes函数怎么写才生效
直接用keyframes返回的字符串当@keyframes名是错的——它返回的是一个生成唯一类名的函数，不是动画名字符串。你得把它当值传给animationName，而不是硬编码进css字符串里。
常见错误：写成animation: 'spin 1s ease-in-out'，但spin根本没注册；或者把keyframes结果当字符串拼进模板字面量里，导致样式丢失。
-
keyframes必须在css或styled中通过插值使用，例如animationName: ${spin} - 返回值不能被
typeof判断为"string"，它是Emotion内部的标识对象，仅用于插值上下文 - 不支持嵌套写法（比如在
styled.div内部再调用keyframes），必须提前定义
如何让keyframes支持动态参数（如颜色、时长）
原生keyframes不接受参数，但可以用闭包封装：把参数作为函数入参，返回一个keyframes调用结果。这个返回值仍需在css中插值使用，不能提前展开。
典型场景是主题色动画、加载条速度控制。注意：每次调用闭包都会生成新动画名，频繁触发可能造成样式表膨胀。
- 写法示例：
const rotate = (deg) => keyframes` from { transform: rotate(0deg); } to { transform: rotate(${deg}deg); } ` - 在组件中使用：
animationName: ${rotate('360')} - 避免在渲染函数内无条件调用（如
useEffect外直接执行），否则每次重渲染都新建动画
SSR环境下keyframes动画不触发怎么办
服务端渲染时，keyframes生成的动画规则不会自动注入标签，客户端 hydrate 后找不到对应@keyframes定义，animation就静默失效。
根本原因是Emotion的keyframes依赖运行时注入机制，在SSR中需配合CacheProvider和createCache显式启用服务端收集。
- 服务端必须用
createCache({ key: 'ssr' })并传入CacheProvider - 确保
keyframes定义在组件外部（模块顶层），不能包裹在组件函数内 - 检查HTML输出是否包含
@keyframes xxx的块；没有的话说明cache未正确传递或未调用extractCritical
多个keyframes命名冲突或覆盖问题
Emotion对相同内容的keyframes会复用同一动画名，但内容稍有差异（比如空格、单位写法不同）就会视为新动画，导致冗余。更麻烦的是，开发时多人定义同名动画（如都叫fadeIn），实际打包后可能只剩一个生效。
这不是bug，是设计使然：Emotion按哈希去重，不按变量名。所以别依赖变量名可读性，而要靠结构一致性控制复用。
- 统一用
px不用rem、全小写transform不用Transform，减少哈希差异 - 避免在
keyframes里引用外部变量（如theme.colors.primary），会导致每次主题变化都生成新动画 - 调试时可用
console.log(fadeIn)看返回对象的name属性，确认是否预期复用
Emotion的keyframes本质是“带副作用的哈希生成器”，它的行为边界比CSS原生@keyframes更窄，也更依赖调用上下文。最容易忽略的是：它从不自动注册到全局样式表，所有动画名都只在插值那一刻才被解析并注入——这意味着漏掉一次插值，整个动画就不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
