CSS動畫不適用於所有版本的IE

我的動畫在Firefox和Chrome中都很好，但IE10/11沒有。我使用0%和100%代替from和toCSS動畫不適用於所有版本的IE

編輯也試過：道歉，我只想澄清這個問題。按照Chrome和Firefox上面的CSS規則，動畫按照預期進行移動。但是簡單地說，沒有什麼是在Internet Explorer中發生，對象是住正是他們

.object-left-side.move { 

    -webkit-animation: .75s ease 0s normal forwards 1 running move_left; 
    -moz-animation: .75s ease 0s normal forwards 1 running move_left; 
    -o-animation: .75s ease 0s normal forwards 1 running move_left; 
    -ms-animation: .75s ease 0s normal forwards 1 running move_left; 
    animation: .75s ease 0s normal forwards 1 running move_left; 

} 

@-webkit-keyframes move_left { 
    from { left: 50%;top:24%;} 
    to {left:5%;top:48%;} 
} 

@keyframes move_left { 
    from { left: 50%;top:24%;} 
    to {left:5%;top:48%;} 
} 
@-moz-keyframes move_left { 
    from { left: 50%;top:24%;} 
    to {left:5%;top:48%;} 
} 

@-ms-keyframes move_left { 
    from { left: 50%;top:24%;} 
    to {left:5%;top:48%;} 
} 

@-o-keyframes move_left { 
    from { left: 50%;top:24%;} 
    to {left:5%;top:48%;} 
} 

.object-left-side { 

    left: 50%; 
    position: absolute; 
    top: 24%; 
    z-index: 0; 
}

來源

2015-11-19 Adrian

你可以發佈一個更完整的例子，實際演示該問題？ –

對不起，有點多加了，但總的來說問題是基本上沒有任何事情發生在Internet Explorer上的動畫 – Adrian

你是否搜索過類似的問題，如：http://stackoverflow.com/questions/10355411/ie10-css-動畫不工作 – m69

據MSDN，

動畫屬性值必須按以下順序進行設置：
動畫名稱
動畫持續時間
動畫定時功能
動畫延遲
ANI mation迭代數
動畫方向

所以，換句話說，如果你寫

animation: move_left .75s ease 0s 1 forwards;

將在IE11工作。

.object-left-side.move { 
 
    -webkit-animation: .75s ease 0s normal forwards 1 running move_left; 
 
    -moz-animation: .75s ease 0s normal forwards 1 running move_left; 
 
    -o-animation: .75s ease 0s normal forwards 1 running move_left; 
 
    -ms-animation: .75s ease 0s normal forwards 1 running move_left; 
 
    animation: move_left .75s ease 0s 1 forwards; 
 
} 
 
@-webkit-keyframes move_left { 
 
    from { 
 
    left: 50%; 
 
    top: 24%; 
 
    } 
 
    to { 
 
    left: 5%; 
 
    top: 48%; 
 
    } 
 
} 
 
@keyframes move_left { 
 
    from { 
 
    left: 50%; 
 
    top: 24%; 
 
    } 
 
    to { 
 
    left: 5%; 
 
    top: 48%; 
 
    } 
 
} 
 
@-moz-keyframes move_left { 
 
    from { 
 
    left: 50%; 
 
    top: 24%; 
 
    } 
 
    to { 
 
    left: 5%; 
 
    top: 48%; 
 
    } 
 
} 
 
@-ms-keyframes move_left { 
 
    from { 
 
    left: 50%; 
 
    top: 24%; 
 
    } 
 
    to { 
 
    left: 5%; 
 
    top: 48%; 
 
    } 
 
} 
 
@-o-keyframes move_left { 
 
    from { 
 
    left: 50%; 
 
    top: 24%; 
 
    } 
 
    to { 
 
    left: 5%; 
 
    top: 48%; 
 
    } 
 
} 
 
.object-left-side { 
 
    left: 50%; 
 
    position: absolute; 
 
    top: 24%; 
 
    z-index: 0; 
 
}

<div class="object-left-side move">Test</div>

來源

2015-11-19 23:02:19

謝謝我沒有意識到訂單是重要的，修復它！ – Adrian

CSS動畫不適用於所有版本的IE

回答

相關問題