React组件内class为wave的span元素CSS波浪动画无法生效问题

1 核心根因 #

<span>是默认行内（inline）元素，CSS transform 属性对非替换行内元素不生效，这是CSS标准规则，和React框架无关。

2 修复代码 #

只需要给span.wave新增display: inline-block属性即可，还可以额外调整变换原点让摆动效果更自然：

@keyframes wave {
    0% { transform: rotate(5deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    60% { transform: rotate(5deg); }
    100% { transform: rotate(5deg); }
}

span.wave {
  display: inline-block; /* 新增行内块属性，支持transform */
  transform-origin: center bottom; /* 可选，调整摆动原点，让表情摆动更像真实挥手 */
  animation: wave 5s infinite;
}

3 其他排查项 #

如果修改后仍不生效，按以下顺序检查：

• 确认App.css文件引入路径正确，没有拼写错误
• 确认元素类名是wave，没有大小写拼写偏差
• 检查是否有其他更高优先级的CSS规则覆盖了animation属性

内容的提问来源于stack exchange，提问作者Michael