title: Animation on element not applied
body: <p>I have a react component in which I append some elements dynamically:</p>
  
  <pre><code>addElement( reactComponent, imgurl, e, layer ) {
      const elementWrapper = document.createElement( 'span' );
      const { dispatch } = this.props;
      const element = document.createElement( 'img' );
      const [ x, y ] = this.getMousePositionInsideTheElement( banner, e );
  
      elementWrapper.style.position = 'absolute';
      elementWrapper.id = layer.name;
  
      element.src = imgurl;
      element.onload = function () {
  
          element.classList.add( layer.name.split('.')[0] );
          element.style.height = '50px';
          element.style.width = '50px';
          elementWrapper.style.top = `${y - 50 / 2 }px`;
          elementWrapper.style.left = `${x - 50 / 2}px`;
  
          element.onclick = () =&gt; dispatch( setSelectedLayer( layer ) );
  
          elementWrapper.appendChild( element );
          reactComponent.appendChild( elementWrapper )
      }
  }
  </code></pre>
  
  <p>based on the user input, I create dynamically a <code>style</code> element and append it on the <code>head</code></p>
  
  <p><code>
      updateScene( stylesheet )
      {
          let style = document.createElement( 'style' );
          style.type = 'text/css';
          style.innerHTML = getCSS( stylesheet );
          document.getElementsByTagName( 'head' )[ 0 ].appendChild( style );
      }
  </code></p>
  
  <p>The element's css properties are correctly updated, and the element is updated as well e.g. if the user change the height and the width, I generate a new css and append it on the head, the css rules are correctly applied and the element in the "Scene" is updated. But that is not happening with the <code>animations</code>, although they seem correct ( they work on Codepen ).</p>
  
  <p>My generated css is like:</p>
  
  <pre><code>img.CZ6kGtDWwAAcrG4 {
    height: 200px;
    widht: 200px;
  }
  
  .CZ6kGtDWwAAcrG4 {
    width: 100px !important;
    height: 100px !important;
    border-top-width: 10px;
    animation-name: cz6kgtdwwaacrg4-octopus-animation;
    animation-iteration-count: 15;
    animation-duration: 5s;
  }
  
  @keyframes cz6kgtdwwaacrg4-octopus-animation {
    9% {
      border-top-style: solid;
    }
  
    42% {
      border-top-style: solid;
    }
  
    70% {
      border-top-width: 30px;
      border-top-color: red;
      border-top-style: solid;
    }
  }
  </code></pre>
  
  <p>Any idea of what I am doing wrong? </p>