React useState with className and styled components hover out - reactjs

Question

I want to implement an animation both on the hover in and out. For hover in I use a normal css :hover. For hover out I tried to make a default state outside of the :hover but this means that when the page loads it already applies it. This is what I tried.
const Container = styled.div`
animation-name: move-card-down;
animation-duration: 0.5s;
animation-fill-mode: forwards;
:hover {
animation-name: move-card-up;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
#keyframes move-card-up {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-1rem);
}
}
#keyframes move-card-down {
0% {
transform: translateY(-1rem);
}
100% {
transform: translateY(0);
}
}
`
So I figured I could instead apply a class to the div whenever a user hovers over it for the first time instead on a page load.
const [hover, setHover] = useState(false);
const onMouseOverCard = (): void => {
setHover(true);
};
const hovered = true === hover ? 'hovered' : '';
<Container onMouseOver={() => onMouseOverCard()} className={`${hovered}`}>
</Container>
const Container = styled.div`
.hovered {
animation-name: move-card-down;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
`
It applies my class to the section but it doesn't load the styles for it. Can someone tell me why this is?

Answer 1

I'm not sure about the transition part, but the toggling of classes should work fine, example: https://codesandbox.io/s/silent-butterfly-qocvd?file=/src/App.js:0-291
import { useState } from "react";
import styled from "styled-components";
import "./styles.css";
const MyDiv = styled.div`
color: red;
&.foobar {
outline: dashed;
}
`;
export default function App() {
const [klass, setKlass] = useState("");
return (
<MyDiv
className={klass}
onMouseEnter={() => setKlass("foobar")}
onMouseLeave={() => setKlass("")}
>
<h1>Hello CodeSandbox</h1>
</MyDiv>
);
}