Html css @-moz-keyframes 动画在 Firefox 18.0.1 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14713191/
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
css @-moz-keyframes animation not working on firefox 18.0.1
提问by Swarnendu Paul
css @-moz-keyframes animation on firefox 18.0.1 is not working,
firefox 18.0.1 上的 css @-moz-keyframes 动画不起作用，
I have checked this animation on previous version( forgot version previous number) , it was working,
我已经在以前的版本上检查过这个动画（忘记了以前的版本号），它正在工作，
Here is the animation
这是动画
<html>
<head>
<style type="text/css">
@-webkit-keyframes animation {
0% { -webkit-transform:translate(100px,100px) scale(1); }
50% { -webkit-transform:translate(00px,00px) scale(2); }
100% { -webkit-transform:translate(100px,100px) scale(1); }
}
@-moz-keyframes animation_m {
0% { -moz-transform:translate(100px,100px) scale(1); }
50% { -moz-transform: translate(00px,00px) scale(2); }
100% { -moz-transform:translate(100px,100px) scale(1); }
}
.cc1{
-webkit-animation-name: "animation";
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-moz-animation-name: "animation_m";
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
}
#id1,#ci1{
position:absolute;
top:0px;
left:0px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var e=document.getElementById("ci1");
var ctx=e.getContext("2d");
ctx.fillStyle="#f00";
ctx.fillRect(0,0,90,90);
}
</script>
<body>
<div id="id1" class="cc1">
<canvas width="100" height="100" id="ci1" ></canvas>
</div>
</body>
</html>
Is it a Firefox bug?
这是 Firefox 的错误吗？
回答by Vlad Magdalin
Firefox 18 (and Opera, and IE10, and many others in the near future) expects the W3C property without the vendor prefix. Make sure to add the following block:
Firefox 18（以及 Opera 和 IE10，以及不久的将来的许多其他版本）期望 W3C 属性没有供应商前缀。确保添加以下块：
@keyframes animation_m {
0% { transform:translate(100px,100px) scale(1); }
50% { transform: translate(00px,00px) scale(2); }
100% { transform:translate(100px,100px) scale(1); }
}
.cc1 {
animation-name: animation_m;
animation-duration: 2s;
timing-function: linear;
}
Note that the -moz-transformproperties were also changed to transform.
请注意，-moz-transform属性也更改为transform.
You should alwaysinclude the vendor-prefix-free version for all prefixed CSS properties. I would also recommend giving your CSS styles and animation names more descriptive names.
您应该始终为所有带前缀的 CSS 属性包含供应商无前缀版本。我还建议为您的 CSS 样式和动画名称提供更具描述性的名称。
回答by Vlad Magdalin
The problem is in this line
问题出在这一行
-moz-animation-name: "animation_m";
in google chromeif you write your animation name in double quote ("") it takes as identifier but in firefoxit is consider as a string , not the identifier so mention animation name without double quote...
在谷歌浏览器中，如果你用双引号（“”）写你的动画名称，它会作为标识符，但在Firefox 中，它被视为一个字符串，而不是标识符，所以请提及没有双引号的动画名称......
-moz-animation-name: animation_m;
