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

【问题标题】：CSS animation not working in all versions of IECSS动画不适用于所有版本的IE
【发布时间】：2015-11-20 07:02:19
【问题描述】：

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

编辑：道歉，只是为了澄清问题。动画按照上面的 CSS 规则在 Chrome 和 Firefox 中移动。但是简单地说，在 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;
}

【问题讨论】：

您能否发布一个更完整的示例，以实际演示问题？
抱歉，补充了一点，但总的来说，问题基本上是 Internet Explorer 上的动画没有发生任何事情
你有没有搜索过类似的问题，比如：stackoverflow.com/questions/10355411/…

标签： html css

【解决方案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;
}

&lt;div class="object-left-side move"&gt;Test&lt;/div&gt;

【讨论】：

谢谢，我没有意识到订单很重要，所以解决了！