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

回答

相关问题