CSS Animation not properly working in React App - css

Question

So I'm trying to make a simple dice roller and want to add a spin animation to make it look cool. For some reason, the animation only works on the initial roll, and not on any after that (unless I refresh). Here is what I have:
App.tsx
export default function App() {
const [dice, setDice] = useState<string[]>([]);
return (
<div className="container">
<h1 className="title-text">Dice Roller</h1>
<div className="roll-dice-button">
<RollBtn setDice={setDice} />
</div>
<Dice dice={dice} />
</div>
)
}
RollBtn.tsx
type Props = {
setDice: (s: string[]) => void
}
export default function RollBtn({setDice}: Props) {
const roll = () => {
let dice: string[] = []'
for(let i = 0; i < 2; i++) {
dice.push(Math.round(Math.random() * 5 + 1));
}
setDice(dice);
}
return <button onClick={() => roll()}>Roll Dice</button>;
}
Dice.tsx
type Props = {
dice: string[];
}
export default function Dice({ dice }: Props) {
return (
<div className="dice-container">
{dice.map((d, i) => (
<div className="die" key={i}>{d}</div>
))}
</div>
)
}
styles.scss
.dice-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
justify-items: center;
align-items: center;
.die {
width: 2em;
height: 2em;
background-color: white;
border-radius: 8px;
color: black;
font-weight: 900;
font-size: 2em;
line-height: 2em;
text-align: center;
animation: spin_dice .25s;
}
}
As I previously stated, on the initial roll it will do the animation, but after that, it will just change the numbers within the dice.

Answer 1

So, if the animation is not a loop, it will be executed just once when the component is rendered. So you need to change the class of the div .die for "" and then change it back to .die when you click on the roll button.
For that you should put the RollBtn and Dice in just one component.