css @-moz-keyframes animation not working on firefox 18.0.1

StackOverflow https://stackoverflow.com/questions/14713191

Question

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?

Was it helpful?

Solution

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.

OTHER TIPS

The problem is in this line

-moz-animation-name: "animation_m";

in google chrome if you write your animation name in double quote ("") it takes as identifier but in firefox it is consider as a string , not the identifier so mention animation name without double quote...

    -moz-animation-name: animation_m;
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top