css @-moz-keyframes animation funktioniert nicht auf firefox 18.0.1

css @-moz-keyframes animation auf firefox 18.0.1 nicht funktioniert,

Ich habe diese animation auf der vorherigen version( version vergessen vorhergehenden Zahl) , es war die Arbeit,

Hier ist die 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>

Ist es ein Firefox bug?

InformationsquelleAutor Swarnendu Paul | 2013-02-05
  1. 12

    Firefox 18 (und Opera und IE10, und viele andere in Naher Zukunft) erwartet, dass die W3C-Eigenschaft ohne vendor-Präfix. Stellen Sie sicher, fügen Sie den folgenden 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;
}

    Beachten Sie, dass die -moz-transform Eigenschaften wurden auch geändert, um transform.

    Sollten Sie immer gehören die vendor-prefix-free-version für alle Präfix für CSS-Eigenschaften. Ich würde auch empfehlen, indem Sie Ihre CSS-Stile und-animation Namen mehr beschreibende Namen.

    • sorry ! funktioniert immer noch nicht. 🙁
    • Hast du mein edit mit der .cc1 Klasse? Die animation-name Eigenschaft übereinstimmen sollten, Ihre keyframes definition, aber es fehlte die _m postfix.
    • seine immer noch nicht funktioniert mit dem edit in .cc1; Nein, das nicht fehlen _m postfix, es ist da
    • Hier ist ein Turnschuh, das funktioniert in der neuesten Chrome und FF: jsfiddle.net/EghZs funktioniert es bei dir?
    • seine arbeiten jetzt!, danke für die Hilfe, es scheint -moz Präfix nicht unterstützt in der neuen version von FF..
    • Super!!! Ja, viele Browser, darunter der Webkit -) wird in Kürze drop-Unterstützung für vendor-Präfixe, so sollten Sie immer die standard-non-Präfix-version.
    • Das wird besser sein, für Programmierer wie uns,
    • Das -moz-Präfix unterstützt wird fein in Firefox 18. Die ursprüngliche Quelle eingefügt, in der dieser bug ist einfach nicht gültig CSS, wie der web-Konsole im Firefox sagt Sie. Insbesondere die animation-name ist ein Bezeichner sein, kein string, und daher sollte nicht in Anführungszeichen eingeschlossen werden.
    • Danke @BorisZbarsky ,
    • sehr gut: "mehr beschreibende Namen" ! 🙂

    InformationsquelleAutor Vlad Magdalin
  2. 6

    Das problem ist in dieser Zeile

    -moz-animation-name: "animation_m";

    in google chrome wenn Sie schreiben Ihre animation ein Namen in doppelten Anführungszeichen ("") dauert es als identifier, aber in firefox es betrachten als string , nicht der Bezeichner, so erwähnen animation-name ohne Anführungszeichen...

        -moz-animation-name: animation_m;
    InformationsquelleAutor
Schreibe einen Kommentar