css animation fnktioniert nicht im Firefox

[jumbo125]

Ich versuche mich gerade im Thema Animation. Alles was ich bis jetzt habe funktioniert supppper :lol:, ABER leider nur im Google Chrome.

Firefox will nicht so mitmachen. Hier der Code teil:

@-webkit-keyframes bgflug {    0% {
        left:0%;
        top:-400px;
        opacity: 0.1;
        -moz-transform:rotate(1deg) scale(0); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(1deg) scale(0); /* Safari */
-o-transform:rotate(1deg) scale(0); /* Opera */
-ms-transform:rotate(1deg) scale(0); /* IE9 */
transform:rotate(1deg) scale(0); 
  }
  
           
  50% {
    opacity: 0.5;
        -moz-transform:rotate(180deg) scale(0.5); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(180deg) scale(0.5); /* Safari */
-o-transform:rotate(180deg) scale(0.5); /* Opera */
-ms-transform:rotate(180deg) scale(0.5); /* IE9 */
transform:rotate(180deg) scale(0.5); 
  
  }
  
    100% {     
        left:50%;
        margin-left: -475px;
        -moz-transform:rotate(360deg) scale(1); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(360deg) scale(1); /* Safari */
-o-transform:rotate(360deg) scale(1); /* Opera */
-ms-transform:rotate(360deg) scale(1); /* IE9 */
transform:rotate(390deg) scale(1);
    }

der funktioniert nur im Google chrome:sad:

wenn ich den gleichen Code unterhalb nochmals mit"@-moz" hinschreibe, funktionierts auch im Chrome nicht mehr.....

@-moz-keyframes bgflug {    0% {
        left:0%;
        top:-400px;
        opacity: 0.1;
        -moz-transform:rotate(1deg) scale(0); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(1deg) scale(0); /* Safari */
-o-transform:rotate(1deg) scale(0); /* Opera */
-ms-transform:rotate(1deg) scale(0); /* IE9 */
transform:rotate(1deg) scale(0); 
  }
  
           
  50% {
    opacity: 0.5;
        -moz-transform:rotate(180deg) scale(0.5); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(180deg) scale(0.5); /* Safari */
-o-transform:rotate(180deg) scale(0.5); /* Opera */
-ms-transform:rotate(180deg) scale(0.5); /* IE9 */
transform:rotate(180deg) scale(0.5); 
  
  }
  
    100% {     
        left:50%;
        margin-left: -475px;
        -moz-transform:rotate(360deg) scale(1); /* Firefox 3.6 Firefox 4 */
-webkit-transform:rotate(360deg) scale(1); /* Safari */
-o-transform:rotate(360deg) scale(1); /* Opera */
-ms-transform:rotate(360deg) scale(1); /* IE9 */
transform:rotate(390deg) scale(1);
    }

hat jemand eine Idee???

 

[djheke]

Da fehlt eine schließende geschweifte Klammer in beiden Anweisungen.

 

[threadi]

Und @-moz-keyframes gilt nur für Firefox-Versionen die das noch unterstützen, @-webkit-keyframes wiederum nur für Chrome-Versionen die auch das noch unterstützen. Wenn Du alle Browser abdecken willst, schreib für jeden Browser je einen dieser Bereiche (also erst @-webkit-keyframes, dann mit -moz, dann komplett ohne diese Hilfsmittel, also @keyframes).

 

[jumbo125]

hat wiedermal super geholfen.

kann man auch Bilder animieren, welche mittels html tag <img src=".... eingefügt werden?

kann man auch ein input feld "hidden" setzten, wenn man einen radiobutton anklickt? hab nämlich mehrere davon und würde ein input feld ausblende, je nachdem welcher gerade angeklickt ist. Ich ahnte immer, dass man das nur mit javascript realisieren kann, aber in den letzten paar tagen überrascht mich css immer wieder