@keyframes zusammenfassen

rernanded

Erfahrenes Mitglied
Hallo,
kann ich die verschiedenen keyframes wie unten zusammenfassen?

Bisher so:
HTML:
@keyframes boxAnimation{

0%{
margin:0 0 0 0px;
-moz-transform:rotate(0deg);
transform:rotate(0deg);
background-color:#999;
}
}


@-webkit-keyframes boxAnimation{

0%{
margin:0 0 0 0px;
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
background-color:#999;
}
}


Neu ev. so??? Verbunden mit , + / da wo ich das Wort VERBUNDEN MIT geschrieben habe.
HTML:
@keyframes boxAnimation VERBUNDEN MIT 
@-webkit-keyframes boxAnimation {

0%{
margin:0 0 0 0px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
background-color:#999;
}
}

MONI
 
Nein, das geht nicht, da hier eine Browserunterscheidung vorgenommen wird. Andernfalls funktioniert das CSS in keinem Browser mehr.

@-webkit-keyframes gilt für Chrome, Opera u. Safari.

Aber die margin- u. background-color-Regel liesse sich offensichtlich auslagern.

Heruntergebrochenes Beispiel:
CSS:
div {margin:0;background-color:#999}

@keyframes boxAnimation {
0% {
  -moz-transform:rotate(0deg);
  transform:rotate(0deg)
  }
}

@-webkit-keyframes boxAnimation {
0% {
  -webkit-transform:rotate(0deg);
  transform:rotate(0deg)
  }
}
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Zurück