CSS如何使用CSS-in-JS处理关键帧动画_在组件内定义动态Keyframes-css教程-PHP中文网

React中styled-components需用keyframes辅助函数生成动态动画，再于styled组件中引用；emotion支持css块内直接调用且SSR友好；Vue 3推荐useKeyframes Hook动态注入/清理规则。

css如何使用css-in-js处理关键帧动画_在组件内定义动态keyframes

React中用`styled-components`定义组件级动态keyframes

直接在组件内生成带props的keyframes，避免全局污染和命名冲突。关键不是“能不能”，而是“怎么让css模板字符串里的@keyframes接收组件参数”。styled-components本身不支持在@keyframes里插值，得绕道：先用keyframes辅助函数生成独立动画对象，再在组件样式中引用。

必须从styled-components导入keyframes，不能手写@keyframes字符串
动态值只能出现在keyframes函数体内（比如color: ${props => props.color}），不能出现在动画名里
生成的动画名是哈希值，安全但不可预测，所以组件内必须用animation-name: ${myAnimation}这种引用方式，不能写死名字

import { keyframes, styled } from 'styled-components';

const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(${props => props.offset || '10px'}); }
  to { opacity: 1; transform: translateY(0); }
`;

const Box = styled.div`
  animation: ${fadeIn} 0.3s ease-out;
`;

为什么`emotion`的`css` + `keyframes`更灵活

emotion允许你在css块内部直接调用keyframes，且支持嵌套作用域——这意味着你可以把keyframes逻辑封装进自定义Hook或高阶函数，复用性更高。它还支持服务端渲染时正确提取关键帧，而styled-components在SSR下需额外配置ServerStyleSheet并确保keyframes被收集。

emotion的keyframes返回的是CSS字符串，可直接传给css函数的animationName属性
若用css + jsx模式，keyframes能随组件卸载自动清理；用styled则仍挂载在全局
注意：动态值不能用于animation-name属性本身（浏览器不支持表达式），只能用于keyframes定义体内部

Vue 3组合式API中用`useKeyframes`实现响应式动画

Vue没有官方CSS-in-JS方案，但可通过ref或computed驱动style绑定，再配合keyframes字符串拼接实现“伪动态”。真正可靠的路径是借助vue-use的useCssVar或封装一个useKeyframes Hook，用document.styleSheets动态注入/替换规则。