Animacja transformacji Css3 nie działa w IE 11 dla dynamicznie tworzonego elementu

Question

Zastosowałem animację transformacji CSS3 do dynamicznie tworzonego elementu i działa ona w Safari, firefox i chrome, ale nie w IE. Sprawdziłem kod i css . nie ma w nich nic złego.

W animacji IE Inspector (narzędzia programistyczne) właściwości animacji są podkreślone na czerwono. Nie wiesz, co jest z tym nie tak. Czy ktoś może ci pomóc?

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

Cóż, w końcu znalazłem powód, dlaczego to nie działa w IE. Umieściłem metatag i zmieniłem go na belows.

Przed

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

Po

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

Dzięki Wiz kid za szybką responce
okrzyki (Y)

Answer 2

Jeśli używasz klatki kluczowe, należy umieścić je bezpośrednio na górze zewnętrznego arkusza stylów CSS.

Przykład: -

@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