How to trigger a CSS animation on EVERY TIME a react component re-renders

Add a key like this:

function Card({ cardText }) {
  return <div key={cardText} className="roll-out">{cardText}<div/>
}

In your code, when the div re-renders, react only changes its inner text. Adding a key will make react think it’s a different div when the key changes, so it’ll unmount it and mount again.