为什么我的动画无法在 Internet Explorer 10+ 中运行？答案

【问题标题】：Why isn't my animation working in Internet Explorer 10+?为什么我的动画无法在 Internet Explorer 10+ 中运行？
【发布时间】：2016-06-12 11:08:10
【问题描述】：

为什么这段代码在IE 10 +中不起作用

.logo{float: left;width: 250px;}
.logo img{float: left;}
.logo img.leftLog{width: 83%;}
.logo img.rightLog{width:13%;margin-left: 4%;background-repeat: no-repeat;

animation: 4s linear 0s normal none infinite running spin;
-moz-animation: 4s linear 0s normal none infinite running spin;
-o-animation: 4s linear 0s normal none infinite running spin;
-webkit-animation: 4s linear 0s normal none infinite running spin;
-khtml-animation: 4s linear 0s normal none infinite running spin;
-ms-animation: 4s linear 0s normal none infinite running spin;

transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-khtml-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
}

@keyframes spin {100% {transform: rotate(0deg);}}
@-moz-keyframes spin {100% {-moz-transform: rotate(0deg);}}
@-o-keyframes spin {100% {-o-transform: rotate(0deg);}}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(0deg);}}
@-ms-keyframes spin {100% {-ms-transform: rotate(0deg);}}

<div class="wrap">
  <a href="" class="logo">
<img src="http://png-3.vector.me/files/images/1/3/139812/arrow_logo_thumb.jpg" alt="logo" class="leftLog">
<img src="http://iconizer.net/files/IconSweets_2/orig/reload_refresh.png" alt="" class="rightLog">
  </a>
</div>

【问题讨论】：

CSS 动画未在 IE8 或 IE9 中实现。第一个支持动画的 IE 版本是 IE10。
那么 10 或 11 呢？ @JamesDonnelly 您是否检查了 IE 10 或 11 中的代码。您只是投了反对票而没有看到问题。
CSS3 动画仅支持 ie10+ 及以上版本。
@Maddy IE11 不喜欢您的 animation 声明。我对 CSS 动画知之甚少，无法告诉你原因：i.imgur.com/9eNxZai.png.
好的@JamesDonnelly 我明白了。我很抱歉，但你有大约 60k 代表。因此，如果您没有足够的知识，请不要投票给其他任何人。 :)

标签： html css internet-explorer animation

【解决方案1】：

问题在于动画对象的注释。在 IE 中，需要一个不同的注释，如 documentation from MSDN 所示。问题是动画可以包含 6 个属性，而你定义了 8 个 IE 不喜欢的属性。

所以不要像这样定义动画：

animation: 4s linear 0s normal none infinite running spin;

你必须像这样定义它：

  animation-name: spin;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: none;
  animation-iteration-count: infinite;
  animation-direction: running;

为了更容易理解，我写出了属性

查看演示：

.logo{float: left;width: 250px;}
.logo img{float: left;}
.logo img.leftLog{width: 83%;}
.logo img.rightLog{width:13%;margin-left: 4%;background-repeat: no-repeat;

  animation-name: spin;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-delay: none;
  animation-iteration-count: infinite;
  animation-direction: running;
  

-moz-animation: 4s linear 0s normal none infinite running spin;
-o-animation: 4s linear 0s normal none infinite running spin;
-webkit-animation: 4s linear 0s normal none infinite running spin;
-khtml-animation: 4s linear 0s normal none infinite running spin;
-ms-animation: 4s linear 0s normal none infinite running spin;

transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-khtml-transform: rotate(360deg); 
-ms-transform: rotate(360deg); 
}

@keyframes spin {100% {transform: rotate(0deg);}}
@-moz-keyframes spin {100% {-moz-transform: rotate(0deg);}}
@-o-keyframes spin {100% {-o-transform: rotate(0deg);}}
@-webkit-keyframes spin {100% {-webkit-transform: rotate(0deg);}}
@-ms-keyframes spin {100% {-ms-transform: rotate(0deg);}}

<div class="wrap">
  <a href="" class="logo">
<img src="http://png-3.vector.me/files/images/1/3/139812/arrow_logo_thumb.jpg" alt="logo" class="leftLog">
<img src="http://iconizer.net/files/IconSweets_2/orig/reload_refresh.png" alt="" class="rightLog">
  </a>
</div>

【讨论】：