css @ -moz-keyframes动画不工作在firefox 18.0.1 [英] css @-moz-keyframes animation not working on firefox 18.0.1
问题描述
CSS @ -moz-关键帧动画不能正常工作，
css @-moz-keyframes animation on firefox 18.0.1 is not working,
我已经检查了以前版本的动画（忘了先前的版本号），它是工作，
I have checked this animation on previous version( forgot version previous number) , it was working,
下面是动画
<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错误吗？
Is it a Firefox bug?
推荐答案
Firefox 18（以及Opera，IE10和其他不久的将来）期望W3C属性没有供应商前缀。请务必添加以下块：
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:
@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样式和动画名称更具描述性的名称。
You should always include 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 @ -moz-keyframes动画不工作在firefox 18.0.1的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
