CSS Animation keyframe in NextJS not working - css

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