Question

我已经将CSS3变换动画应用于动态创建的元素，它可以在Safari，firefox和chrome中运行，但不能在IE中运行。我已经检查了代码和css。他们没有错。

在IE检查器（开发人员工具）中，动画属性用红色下划线标注。不知道这有什么问题。有人可以帮忙吗？。

我的CSS

.loadNew {

  -webkit-animation-name: rotate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: rotate;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -o-animation-name: rotate;
  -o-animation-duration: 1s;
  -o-animation-iteration-count: infinite;
  -o-animation-timing-function: linear;


  /* below animation properties are underlined in red in IE inspector */
  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}

@-webkit-keyframes rotate {

  from {
     -webkit-transform: rotate(0deg);
  }

  to {
     -webkit-transform: rotate(360deg);
  }
}

@-moz-keyframes rotate {

  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes rotate {

  from {
    -o-transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(360deg);
  }
}

@keyframes rotate {

 from {
   transform: rotate(0deg);
 }

 to {
   transform: rotate(360deg);
 }
}

Answer 1

如果您使用的是关键帧，请务必将它们直接放在外部CSS样式表的顶部。

示例： -

@font-face {
  font-family:'mycoolfont';
  src:url('../fonts/mycoolfont.eot');
  src:url('../fonts/mycoolfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/mycoolfont.woff') format('woff'), 
    url('../fonts/mycoolfont.ttf') format('truetype'), 
    url('../fonts/mycoolfont.svg#mycoolfont') format('svg');
  font-weight:normal;
  font-style:normal;
}

/** Keyframes **/
@-webkit-keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}
@keyframes pulsate {
   0% { box-shadow: 0 0 1px #fff ; }
   100% { box-shadow: 0 0 20px #fff; }
}

a {
   -webkit-animation: pulsate 1.25s infinite alternate;
   animation: pulsate 1.25s infinite alternate;
}

Reference

Answer 2

好吧，最后我找到了它在IE中不起作用的原因。我已经放置了一个元标记，我将其更改为初级讲座。

之前

 <meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>

后

 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>

感谢 wiz kid 快速回复欢呼（Y）

对于动态创建的元素，Css3变换动画在IE 11中不起作用

2 个答案: