Css3 animation translation not working in IE 11 for dynamically created element

Question

I applied CSS3 transform animation to a dynamically created element and it works in Safari, firefox and chrome, but not in IE. I checked the code and css. there is nothing wrong with them.

In IE Inspector (Developer Tools), animation properties are underlined in red. I don’t know what is wrong with this. can someone help?

MY CSS

.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

Well, finally, I found the reason why it did not work in IE. I put a meta tag and I changed it as a bellows.

Before

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

After

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

Thanks wiz kid for your quick reply
cheers (Y)

Answer 2

If you use keyframes, be sure to place them directly at the top of the 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; } 

Link