css @ -moz-keyframes动画不能在firefox 18.0.1上运行

Question

css @-moz-keyframes animation on firefox 18.0.1 is not working, firefox 18.0.1上的css @ -moz-keyframes动画无效，

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? 它是Firefox的bug吗？

Answer 1

Firefox 18 (and Opera, and IE10, and many others in the near future) expects the W3C property without the vendor prefix . Firefox 18（以及Opera，IE10和其他许多其他公司在不久的将来）期望W3C属性没有供应商前缀。 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 . 请注意， -moz-transform属性也已更改为transform 。

You should always include the vendor-prefix-free version for all prefixed CSS properties. 您应该始终为所有带前缀的CSS属性包含vendor-prefix-free版本。 I would also recommend giving your CSS styles and animation names more descriptive names. 我还建议为CSS样式和动画名称提供更具描述性的名称。

Answer 2

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... 在谷歌浏览器中，如果你用双引号（“”）编写你的动画名称，它需要作为标识符，但在firefox中它被认为是一个字符串，而不是标识符所以提到没有双引号的动画名称...

    -moz-animation-name: animation_m;

css @ -moz-keyframes动画不能在firefox 18.0.1上运行

问题描述

2 个解决方案

解决方案1
12 已采纳 2013-02-05 17:24:28

解决方案2
6

css @ -moz-keyframes动画不能在firefox 18.0.1上运行

问题描述

2 个解决方案

解决方案1 12 已采纳 2013-02-05 17:24:28

解决方案2 6

解决方案1
12 已采纳 2013-02-05 17:24:28

解决方案2
6