Home/ Questions/Q 9246633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T09:32:15+00:00

css @-moz-keyframes animation on firefox 18.0.1 is not working, I have checked this animation

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0