Emotion关键帧动画怎么设置？
2026-05-02 10:23:36
0浏览
收藏
Emotion的keyframes并非返回可直接使用的CSS动画名字符串，而是一个仅供插值（如`animationName: ${spin}`）的标识对象，必须在`css`或`styled`中动态注入才能生效；硬编码动画名、字符串拼接、组件内嵌定义或忽略SSR缓存配置都会导致动画失效；它通过内容哈希智能去重，但对空格、单位、大小写敏感，且支持闭包传参实现动态效果——掌握其“运行时注入+上下文依赖”的本质，才能避开样式丢失、重复生成和SSR不渲染等高频陷阱。
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生成的动画规则不会自动注入
