Hoạt ảnh chuyển đổi Css3 không hoạt động trong IE 11 cho phần tử được tạo động

Question

Tôi đã áp dụng hoạt ảnh chuyển đổi CSS3 thành phần tử được tạo động và nó hoạt động trong Safari, firefox và chrome nhưng không có trong IE.I đã kiểm tra mã và css . không có gì sai với họ.

Trong thuộc tính hoạt hình thanh tra IE (Công cụ dành cho nhà phát triển) được gạch dưới màu đỏ.Không biết điều gì là sai với điều này. ai đó có thể xin giúp đỡ ?.

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

Vâng, cuối cùng tôi đã tìm thấy lý do tại sao nó không làm việc trong IE. Tôi đã đặt một thẻ meta và tôi đã thay đổi nó thành belows.

Trước

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

Sau

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

Cảm ơn Wiz đứa trẻ cho phản ứng nhanh chóng của bạn
cổ vũ (Y)

Answer 2

Nếu bạn đang sử dụng các khung hình chính, hãy chắc chắn để đặt chúng trực tiếp ở phía trên cùng của CSS stylesheet bên ngoài của bạn.

Ví dụ: -

@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