为什么我的动画在Internet Explorer 10+中不起作用？

Question

为什么此代码无效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>

Answer 1

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

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

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;

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

参见演示：

＆＃13;

＆＃13;

.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);}}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;