Next.js 14中CSS Keyframe动画无法生效的解决方法咨询

问题分析 #

你的动画不生效有两个核心原因：

1. animation属性不完整：.slideAnimation类中只指定了动画时长、缓动函数和循环次数，但缺少要执行的关键帧名称，浏览器无法识别对应的动画逻辑。
2. CSS Modules的作用域限制：Next.js的CSS Modules会对局部类名和关键帧名称进行哈希重命名，直接写@keyframes slideAnimation会被处理成唯一哈希名，而你在animation中引用的slideAnimation是原始名称，导致无法匹配。

解决方案 #

方案1：使用全局关键帧（最简单） #

修改你的animation.module.css，补全animation属性，并将关键帧声明为全局作用域：

.slideAnimation {
    /* 补上关键帧名称，完善animation属性 */
    animation: slideAnimation 2s linear infinite;
}

/* 用:global()包裹关键帧，避免被CSS Modules哈希重命名 */
:global(@keyframes slideAnimation) {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    5% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

方案2：使用局部作用域关键帧（符合CSS Modules规范） #

如果不想用全局关键帧，可以利用CSS Modules导出关键帧名称的特性，通过CSS变量引入：

1. 修改animation.module.css：

.slideAnimation {
    /* 使用CSS变量引用关键帧 */
    animation: var(--slide-animation) 2s linear infinite;
}

@keyframes slideAnimation {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    5% {
        opacity: 0.7;
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

2. 在组件中注入CSS变量：

import style from './animation.module.css';

export const FadeAnimationComponent = () => {
   return(
    <>
     {/* 父容器添加relative定位，确保Image的absolute布局生效 */}
     <div className="relative" style={{ '--slide-animation': style.slideAnimation }}>
       <Image
         className={`${style.slideAnimation} absolute w-full h-full`}
         src="/your-image-path.jpg" // 替换为你的图片路径
         alt="Animated content"
         fill // 配合absolute使用，填充父容器
       />
     </div>
  </>
 )
}

额外注意事项 #

• Next.js的Image组件需要必填的src、alt属性；使用absolute和w-full h-full时，必须给父容器添加relative定位，否则图片会脱离正常文档流导致显示异常。
• 原生CSS关键帧动画并不复杂，无需依赖额外库，只要注意属性完整性和作用域问题即可正常运行。

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