title: CSS Animation when Div is added in Vue v-for list
body: <p>I had a vue list like below:</p>
  
  <pre><code>&lt;div v-for="item in items"&gt;
     &lt;div class="animation"&gt;{{ item.name }}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my animation is </p>
  
  <pre><code>
  @keyframes loadingComment {
      0% {
          opacity: 0.6 !important;
      }
      99% {
          opacity: 0.6 !important;
      }
      100% {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>However when I add an animation to to item it starts the animation whenever the page loads even tho there are 0 items inside the array. I want the animation to play when the item is added to the items array. Any ideas? I assumed this is how it would work as default?</p>
  
  <p>Thanks,
  Jamie</p>