title: Apply css Animation to Div when Array.map added or remove div in react.js
body: <p><strong>For reference</strong>, check out this <a href="https://stackblitz.com/edit/react-ts-cufbw4?file=index.tsx" rel="nofollow noreferrer">StackBlitz Link</a></p>
  <p>I have css animation <code>@keyframes</code> class..</p>
  <pre><code> /*
      Animation classes.
   */
  
  .example-enter {
     animation: flasher 0.5s;
  }
  
  @keyframes flasher{
     from {
        opacity: 0.2;
     }
     to {
       opacity: 1;
     }
  }
  </code></pre>
  <p>I am applying this <code>.example-enter</code> css class to div when <code>array.map</code> is having new added data. like below..</p>
  <pre><code>&lt;div className=&quot;example-enter&quot;&gt; ... &lt;/div&gt;
  </code></pre>
  <p>The question is when I added new Array to state, react will create new div, and gives animation to last added div only. But I want very first element to be animated, not last one when added new state to array.</p>
  <p>You can check out demo in above stackblitz link to check out more details and see there when we add new list only last div is animated but i want to animate very first element to animate because that first div element is i added to array. using.. <code>setTodoState( prev =&gt; [newTodoState, ...prev ]);</code></p>