How to re-use animation each time element.textContent is changed?

Question

this is pretty simple, but I have javascript generating textContent changes for a rock paper scissors project. The fade in animation only works on the first event.

I've tried searching the web for solutions. I tried element.removeChild(element.firstChild); right before each textContent change, but it didn't work I think because the textContent is not considered a node. I tried deleting the textContent right before each change, which also didn't work. Any help is much appreciated!

Javascript snippet:

 if ((playerPick === "Rock" && computerPick === "Scissors") || (playerPick 
        === "Paper" && computerPick === "Rock") || (playerPick === "Scissors" && 
        computerPick === "Paper")) {
            playerWins++;
            rounds++;
            round.textContent = `You win! ${playerPick} beats ${computerPick}!`;
        }

CSS snippet:

.narrative-banner {
        text-align: center;
        color: white;
        font-size: 2.2em;
        font-weight: 700;
        padding: .2em;
        padding-top: .8em;
        animation: fade-in 5s;
}