NextJS项目中CSS Animation关键帧动画不生效问题求助

核心问题及修复方案 #

问题1：动画名大小写不匹配，导致找不到对应关键帧 #

你在.hiOut类中引用的动画名是fadeOut（字母O大写），但定义@keyframes时用的是fadeout（字母o小写），CSS Modules 对标识符大小写敏感，因此转译后两个名称无法对应，动画自然无法触发。

问题2：淡出动画的关键帧逻辑写反 #

你当前定义的fadeout关键帧是从透明度0变到1，和淡入逻辑完全一致，就算匹配到动画也看不到淡出效果。

问题3：淡入动画未设置停留状态 #

.hi类没有加animation-fill-mode: forwards，淡入动画结束后会回退到你定义的初始opacity:0状态，不符合正常的淡入展示需求。

修复后的样式代码 #

.hi {
    display: inline-block;
    /* 合写动画属性：动画名 时长 延迟 播放次数 结束后保持最后一帧状态 */
    animation: fadein 1s .1s 1 forwards;
    opacity: 0;
}

.hiOut {
    display: inline-block;
    animation: fadeOut 3s .1s 1 forwards;
    border: 1px solid red;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 统一动画名大小写，调整淡出逻辑为从透明度1变到0 */
@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

可选优化：调整动画结束回调逻辑 #

你当前的onAnimationEnd逻辑不分动画类型，只要动画结束就切回.hi类，会导致淡出动画结束后重新触发淡入。可以按需求调整：

import styles from '../../styles/Hi.module.css'
import {useEffect, useState} from 'react';

const Hi = ({children, extraClass, navigateAway}) => {
    const [className, setClassName] = useState(styles.hi);

    useEffect(()=>{
        if(navigateAway) {
           setClassName(styles.hiOut)
        }
    },[navigateAway]);

    return (
        <span 
          onAnimationEnd={()=>{
            // 只有淡入动画结束才切换状态，淡出动画结束不切回
            if(className !== styles.hiOut) {
              setClassName(`${styles.hi} ${styles.done}`)
            }
          }} 
          className={className}
        >
          {children}
        </span>
    );
};

export default Hi;

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