我的动画在Firefox和Chrome中可以正常运行,但在IE10 / 11上却可以。我也尝试使用0%
and100%
代替from
andto
编辑:道歉,只是为了澄清问题。动画在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;
}
根据MSDN,
动画属性值必须按以下顺序设置:
动画名称
动画持续时间
动画计时功能
动画延迟
动画迭代次数
动画方向
所以换句话说,如果你写
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句