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

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

谢谢你的孩子快速回应
欢呼(Y)