title: Continuous animation across dynamically loaded elements
body: <p>I need to have a continuously running CSS @keyframe animation <em>across</em> elements that are dynamically added, destroyed and replaced via ajax/fetch.</p>
  
  <p>But binding an animation to a dynamically added element makes the animation restart from 0% every time the element is replaced.</p>
  
  <p>A partial solution is binding the animation to an unmutable parent element. The animation then will run continuously and affect any child elements, even if they are dynamically replaced. </p>
  
  <p>But this solution is limited in that I cannot select which animations are inherited by which child element.</p>
  
  <p>For this code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class='parent'&gt;
    &lt;div class='child one'&gt;Some text&lt;/div&gt;
    &lt;div class='child two'&gt;Other text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS (SASS)</p>
  
  <pre><code>.parent
    animation: BY 15s infinite alternate
  
  .child.two
    animation: RG 15s infinite alternate
  
  @keyframes BY
    0%
      color: blue
    100%
      color: yellow
  
  @keyframes RG
    0%
      color: red
    100%
      color: green
  </code></pre>
  
  <p>Only the BY animation from '.parent' which affects '.child.one' text remains continous across any dynamic replacement of '.child.one'. While the animation of '.child.two' restarts at 0% every time it is dynamically replaced.</p>
  
  <p>This is a codepen illustrating this behaviour: <a href="https://codepen.io/plagasul/pen/WNerBvO" rel="nofollow noreferrer">https://codepen.io/plagasul/pen/WNerBvO</a></p>
  
  <p>I would like '.child.one' and '.child.two' to have different animations, that are both continuous across dynamic replacement of these elements.</p>
  
  <p>Thank you</p>