title: Css3 transform animation doesn't work in IE 11 for a dynamically created element
body: <p>I have applied CSS3 transform animation to a dynamically created element and it works in Safari,firefox and chrome but not in IE.I have checked the code and css. there is nothing wrong with them.</p>
  
  <p>In IE inspector(Developer tools) animation properties are underlined in red.Don't know what is wrong with this. can someone please help?.</p>
  
  <p><b>MY CSS</b> </p>
  
  <pre><code>.loadNew {
  
    -webkit-animation-name: rotate;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  
    -moz-animation-name: rotate;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
  
    -o-animation-name: rotate;
    -o-animation-duration: 1s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
  
  
    /* below animation properties are underlined in red in IE inspector */
    animation-name: rotate;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  
  }
  
  @-webkit-keyframes rotate {
  
    from {
       -webkit-transform: rotate(0deg);
    }
  
    to {
       -webkit-transform: rotate(360deg);
    }
  }
  
  @-moz-keyframes rotate {
  
    from {
      -moz-transform: rotate(0deg);
    }
  
    to {
      -moz-transform: rotate(360deg);
    }
  }
  
  @-o-keyframes rotate {
  
    from {
      -o-transform: rotate(0deg);
    }
  
    to {
      -o-transform: rotate(360deg);
    }
  }
  
  @keyframes rotate {
  
   from {
     transform: rotate(0deg);
   }
  
   to {
     transform: rotate(360deg);
   }
  }     
  </code></pre>