Question

我的动画在Firefox和Chrome中很好，但不是IE10 / 11。我还尝试使用0%和100%代替from和to

编辑：道歉，只是为了澄清问题。根据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;
}

Answer 1

根据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>

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

1 个答案: