CSS Animation keyframe in NextJS not working

Question

I currently have a very simple component in NextJS that is echo'ing HI at the moment. This component fades in on load, and I'm trying to pass a prop to it, to fade it out. Sounds simple enough, except, the fadeOut doesn't seem to be executing, even though the className renders on the page, albeit in transpiled form. I can't see what I'm doing wrong.

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 === true ) {
           setClassName(styles.hiOut)
        }
    },[navigateAway]);

    return (
        <span onAnimationEnd={()=>setClassName(styles.hi + ' ' + styles.done)} className={className}>{children}</span>
    );
};

export default Hi;

styles:

.hi {
    display:inline-block;
    animation-iteration-count: 1;
    animation-delay: .1s;
    animation: fadein 1s;
    opacity: 0;
}

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



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

@keyframes fadeout {
    0% { opacity: 0;}
    100%   { opacity: 1; }
}

For what its worth: via the Inspector on the page, the class renders this on inspecting it, and the red border 1px solid shows, my animation, not so much.

.Hi_hiOut__3g-I4 {
    display: inline-block;
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation: Hi_fadeOut__265f3 3s;
    -moz-animation: Hi_fadeOut__265f3 3s;
    animation: Hi_fadeOut__265f3 3s;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: Hi_fadeOut__265f3;
    border: 1px solid red;
}

Answer 1

Oh God. Kill me now.

animation: fadeOut 3s;

fadeout not fadeOut