css @-moz-keyframes 动画在 firefox 18.0.1 上不工作，
我已经在以前的版本上检查过这个动画(忘记了以前的版本编号)，它正在运行，
这是动画
<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>
这是 Firefox 的错误吗？
最佳答案
Firefox 18(以及 Opera、IE10，以及不久的将来的许多其他产品)需要 W3C 属性 without the vendor prefix .确保添加以下 block :
@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;
}
请注意，-moz-transform 属性也更改为 transform。
您应该始终为所有带前缀的 CSS 属性包含无供应商前缀的版本。我还建议为您的 CSS 样式和动画名称提供更具描述性的名称。
关于html - css @-moz-keyframes 动画不适用于 firefox 18.0.1，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14713191/