4

Firefox 18.0.1 で css @-moz-keyframes アニメーションが機能しない

私は以前のバージョンでこのアニメーションをチェックしました（バージョンの以前の番号を忘れました）、それは機能していました、

アニメーションはこちら

<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のバグですか？

4

2 に答える 2

12

Firefox 18 (および Opera、IE10、および近い将来のその他の多く) は、 vendor prefix のないW3C プロパティを想定しています。次のブロックを必ず追加してください。

@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 スタイルとアニメーションの名前には、よりわかりやすい名前を付けることをお勧めします。

于 2013-02-05T17:24:28.413 に答える
6

問題はこの行にあります

-moz-animation-name: "animation_m";

Google chromeでアニメーション名を二重引用符 ("") で記述すると、識別子として使用されますが、firefoxでは識別子ではなく string と見なされるため、アニメーション名を二重引用符なしで記述します...

    -moz-animation-name: animation_m;
于 2013-02-17T09:14:05.597 に答える