Html 对于动态创建的元素，CSS3 转换动画在 IE 11 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27480041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css3 transform animation doesn't work in IE 11 for a dynamically created element
提问by GMHSJ
I have applied CSS3 transform animation to a dynamically created element and it works in Safari,firefox and chrome but not in IE.I have checked the code and css. there is nothing wrong with them.
我已将 CSS3 变换动画应用于动态创建的元素，它在 Safari、firefox 和 chrome 中有效，但在 IE 中无效。我检查了代码和 css。他们没有错。
In IE inspector(Developer tools) animation properties are underlined in red.Don't know what is wrong with this. can someone please help?.
在 IE 检查器（开发人员工具）中，动画属性用红色下划线标出。不知道这有什么问题。有人可以帮忙吗？。
MY CSS
我的 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);
}
}
采纳答案by GMHSJ
Well, finally I found the reason why it didn't work in IE. I have placed a meta tag and I changed it as belows.
好吧，我终于找到了它在 IE 中不起作用的原因。我已经放置了一个元标记，并将其更改如下。
Before
前
<meta http-equiv="X-UA-Compatible" content="IE=9,chrome=1"/>
After
后
<meta http-equiv="X-UA-Compatible" content="IE=9;IE=10;IE=Edge,chrome=1"/>
Thanks wiz kidfor your quick responce
cheers (Y)
感谢精灵小子的快速反应
欢呼（Y）
回答by Aditya Singh
If you're using keyframes, be sure to place them directly at the top of your external CSS stylesheet.
如果您使用关键帧，请确保将它们直接放置在外部 CSS 样式表的顶部。
Example:-
例子：-
@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;
}
