Css3 dönüşümü animasyonu dinamik olarak oluşturulmuş bir öğe için IE 11'de çalışmıyor

Question

Dinamik olarak oluşturulmuş bir öğeye CSS3 dönüşümü animasyonu uyguladım ve Safari, firefox ve chrome'da çalışıyor ancak IE'de değil. . Onlarla yanlış bir şey yok.

IE denetçisinde (Geliştirici araçları) animasyon özellikleri kırmızı renkte çizilmiştir. Bunun neyin yanlış olduğunu bilmiyorum. Birisi lütfen yardım edebilir mi?.

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

Eh, nihayet ben IE işe yaramadı nedenini buldum. Bir meta etiketi yerleştirdim ve bunu belows olarak değiştirdim.

önce

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

hızlı yanıtta

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

teşekkür dahisi çocuk sonra
şerefe (Y)

Answer 2

kareleri kullanarak yapıyorsanız, dış CSS stil üstündeki doğrudan koyun emin olun.

Örnek: -

@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