Emotion关键帧动画怎么设置？

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生成的动画规则不会自动注入

密码登录在这里

微信扫码登录或注册

打开微信扫一扫，快速登录/注册

登录即同意 用户协议 和 隐私政策

微信登录更方便

• 密码登录
• 注册账号

忘记密码

登录

注册

登录即同意 用户协议 和 隐私政策

返回登录

• 重置密码

发送验证码

重置密码