CSS Animation on static content an on elements created by JS

by bjelline

HTML

<h1 class="animated">I am static content</h1>

CSS

.animated {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: 3;
      -webkit-animation-iteration-count: 3;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

JavaScript

b = document.getElementsByTagName("body")[0];

h = document.createElement("h1");
h.innerHTML="I was created by js";
h.className="animated";

b.appendChild(h);