Heute ausnahmsweise mal etwas, was nicht (unbedingt) mit WordPress zusammenhängt. Ein LESS Mixin für Animationen. Und so geht’s:

LESS Mixin für Animationen

.animation( @animation ) {
  -webkit-animation: @animation;
  animation: @animation;
}

Wer es noch etwas ausführlicher haben will, kann auch folgendes tun:

.animation( @animation ) {
  -moz-animation: @animation;
  -o-animation: @animation;
  -webkit-animation: @animation;
  animation: @animation;
}

Helfen tut Letzteres nur wenig. Laut Can I use wurde z.B. -moz-animation und -o-animation ohnehin nie offiziell unterstützt.

Ausgabecode

Ausgegeben wird nach der Umwandlung logischerweise folgendes (als Beispiel):

.beispiel {
  .animation( meine_animaion 5s );
}

.beispiel {
  -webkit-animation: meine_animation 5s;
  animation: meine_animation 5s;
}

Browser-Unterstützung

• IE ab 10.0
• Firefox ab 25.0
• Chrome ab 31.0 (mit -webkit-Syntax)
• Safari ab 7.0 (mit -webkit-Syntax)
• Opera ab 18.0 (mit -webkit-Syntax)
• iOS ab 3.2 (mit -webkit-Syntax)
• Android ab 2.1 (mit -webkit-Syntax)
• Blackberry ab 7.0 (mit -webkit-Syntax)
• IE Mobile ab 10.0

Nicht unterstützt wird Opera Mini.