CSS动画不适用于所有版本的IE

阿德里安

我的动画在Firefox和Chrome中可以正常运行,但在IE10 / 11上却可以。我也尝试使用0%and100%代替fromandto

编辑:道歉,只是为了澄清问题。动画在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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章