IE10 - CSS 动画不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10355411/
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
IE10 - CSS animation not working
提问by dex3703
I have a scale animation that worked in IE10 for about a day and then stopped. I didn't make any changes and am not sure what would happen to break it.
我有一个在 IE10 中工作了大约一天然后停止的缩放动画。我没有做任何改变，也不知道会发生什么破坏它。
Does anyone have any ideas? When I look in the IE dev tools it's not picking up the animation name, but is picking up all the other properties.
有没有人有任何想法？当我查看 IE 开发工具时，它没有选择动画名称，而是选择了所有其他属性。
Here's the CSS:
这是CSS：
@-ms-keyframes move97
{
0% {
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
}
50% {
transform:scale(0.97,0.97);
-ms-transform:scale(0.97,0.97);
-moz-transform:scale(0.97,0.97);
-webkit-transform:scale(0.97,0.97);
-o-transform:scale(0.97,0.97);
}
100% {
transform:scale(1,1);
-ms-transform:scale(1,1);
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
}
}
.press97
{
-ms-animation-name: move97 0.2s; /* note MS has this different.... ugh */
animation: move97 0.2s;
-moz-animation: move97 0.2s; /* Firefox */
-webkit-animation: move97 0.2s; /* Safari and Chrome */
animation-timing-function: linear;
-moz-animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
}
采纳答案by dex3703
Apparently the help link I was following isn't correct. When I change it to -ms-animation: move97 0.2s, it works. This is what I had originally and it did NOT work, so I changed it to what's shown above, which did.
显然，我关注的帮助链接不正确。当我将其更改为 -ms-animation: move97 0.2s 时，它可以工作。这是我最初拥有的，但它不起作用，所以我将其更改为上面显示的内容，确实如此。
Help link I followed: http://msdn.microsoft.com/library/ie/hh673530.aspx
我遵循的帮助链接：http: //msdn.microsoft.com/library/ie/hh673530.aspx
I've been told it'll be corrected.
我被告知它会被纠正。
回答by Sampson
The standard syntax is supported in Internet Explorer 10with no need for the -msprefix on the keyframes declaration, nor on the animation-nameproperty. In fact, IE10, like the other vendor products, supports the shorthand animationproperty alone as well:
Internet Explorer 10 支持标准语法，不需要-ms关键帧声明中的前缀，也不需要animation-name属性。事实上，IE10 与其他供应商产品一样，也仅支持速记animation属性：
@keyframes myanimation {
0% { color: black; }
80% { color: gold; transform: translate(20px,20px); }
100% { color: black; translate(0,0); }
}
#anim {
display: inline-block;
animation: myanimation 5s 5; /* use myanimation 5s duration, 5 times */
}
Fiddle: http://jsfiddle.net/ZfJ4Z/1/
