Css3 transform animation doesn't work in IE 11 for a dynamically created element

Question

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.

In IE inspector(Developer tools) animation properties are underlined in red.Don't know what is wrong with this. can someone please help?.

.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);
 }
}     

Answer 1

If you're using keyframes, be sure to place them directly at the top of your external CSS stylesheet.

Example:-

@font-face {
  font-family:'mycoolfont';
  src:url('../fonts/mycoolfont.eot');
  src:url('../fonts/mycoolfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/mycoolfont.woff') format('woff'), 
    url('../fonts/mycoolfont.ttf') format('truetype'), 
    url('../fonts/mycoolfont.svg#mycoolfont') format('svg');
  font-weight:normal;
  font-style:normal;
}

/** Keyframes **/
@-webkit-keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}
@keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}

a {
   -webkit-animation: pulsate 1.25s infinite alternate;
   animation: pulsate 1.25s infinite alternate;
}

Reference

Answer 2

Well, finally I found the reason why it didn't work in IE. I have placed a meta tag and I changed it as belows.

 <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>

 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

Thanks for your quick responce 快速回应
cheers (Y)