Next.js 13.3.0全局shake动画不生效问题求助

问题根源 #

Next.js处理全局样式时，@keyframes的作用域会被特殊处理——如果全局定义的动画未明确标记为全局作用域，组件中调用时可能无法识别，只有组件专属SCSS里的同名动画能被当前组件作用域识别。

无需重复代码的解决办法 #

1. 给全局动画标记全局作用域 #

在animations.scss中，用:global()包裹关键帧定义，强制动画名称进入全局作用域：

:global(@keyframes shake) {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* 若有绑定动画的全局类，同样需要全局声明 */
:global(.shake) {
  animation: shake 0.5s ease-in-out;
}

之后组件直接使用className="shake"就能触发动画，不用在组件SCSS里重复定义。

2. 确认全局样式导入顺序 #

在pages/_app.js中，确保master.scss的导入在所有组件专属样式之前，避免组件样式的作用域覆盖全局动画：

// pages/_app.js
import '../styles/master.scss'; // 全局样式放在最顶部
import '../components/Button/Button.scss';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

3. 取消组件SCSS的CSS Modules（可选） #

如果你的组件SCSS不需要使用CSS Modules特性，可将文件名从[组件名].module.scss改为[组件名].scss，Next.js会将其作为全局样式处理，全局动画也能正常生效。但这种方式容易引发样式污染，优先推荐第一种方法。

验证步骤 #

修改后重启Next.js开发服务器（npm run dev），打开浏览器开发者工具检查目标元素的animation属性，确认全局动画已被正确应用并触发。

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