title: How to trigger a CSS animation on EVERY TIME a react component re-renders
body: <p>I want to play an animation on a react component every time it rerenders due to prop change:</p>
  <p>react:</p>
  <pre><code>function Card({ cardText }) {
    return &lt;div className=&quot;roll-out&quot;&gt;{cardText}&lt;div/&gt;
  }
  </code></pre>
  <p>So I did css:</p>
  <pre class="lang-css prettyprint-override"><code>@keyframes rollout {
    0% { transform: translateY(-100px); }
    100% { transform: none; }
  }
  
  .roll-out {
    animation: rollout 0.4s;
  }
  </code></pre>
  <p>However, the animation only plays once, on the initial render. I want to play it every time <code>&lt;Card /&gt;</code> re-renders due to <code>cardText</code> change. How can I achieve it?</p>