[英]Why doesn't this CSS animation work on IE?
我實現了這個很好的基於CSS的小加載程序 ,然后意識到它在IE上不起作用(我嘗試了IE11)。 我以為可能需要供應商特定的前綴,所以我嘗試使用使用“最后2個版本”作為過濾器的在線自動前綴,並添加了“ -webkit-”前綴而不是“ -ms-”前綴,這使我想知道是否有某些東西導致無法顯示“ -ms-”前綴的css代碼編寫方式錯誤。 我嘗試將“ -webkit-”手動替換為“ -ms-”,但在IE上仍然無法使用。
是什么阻止了它在IE上運行? 供應商前綴與它有關系嗎?
目前,我沒有在除Chrome和IE之外的任何瀏覽器上嘗試過,但如果可以的話,我想使其在所有主流瀏覽器的前2個版本中均可使用。
原始CSS-在Chrome上效果很好,但在IE上效果不佳:
.page-loader{ background: #f9f9f9 none repeat scroll 0 0;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9998;}
.loader {
height: 8px;
margin: 0 auto;
position: relative;
text-align: center;
top: 50%;
width: 44px;
}
.dot {
background: #ccc none repeat scroll 0 0;
border-radius: 50%;
display: inline-block;
height: 10px;
position: absolute;
width: 10px;
}
.dot_1 {
animation: 1.5s linear 0s normal none infinite running animateDot1;
background: #f26f29 none repeat scroll 0 0;
left: 12px;
}.dot_2 {
animation: 1.5s linear 0.5s normal none infinite running animateDot2;
left: 24px;
}.dot_3 {
animation: 1.5s linear 0s normal none infinite running animateDot3;
left: 12px;
}.dot_4 {
animation: 1.5s linear 0.5s normal none infinite running animateDot4;
left: 24px;
}
@keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
@keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
@keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
@keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
也許嘗試從animation
屬性中刪除running
值。 這使動畫在IE11中對我有用。
我看到這里對此問題進行了一些討論:
“ CSS3動畫在IE11中不起作用,但在其他瀏覽器中起作用 ”
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.