css @-moz-keyframes animation not working on firefox 18.0.1
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,
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?
Answer
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;
}
Note that the -moz-transform properties were also changed to transform.
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.