Vor ein paar Wochen zum ersten Mal CSS3 Animationen eingesetzt. Dabei kamen dann wieder die obligatorischen Vendor-Prefixes ins Spiel. So etwas ist aber für einen Webentwickler wie mich nicht gerade zufriedenstellend und normalerweise nimmt einem SASS die Sache ja ab. Leider habe ich für CSS Animations keine Standard-Mixin in SASS bzw. Compass gefunden. Auch bei Github gab es keine allgemeinen Lösungen. Dort wurden meist nur für ganz spezifische Animationen Mixins angeboten.

Mixins für Animationen

Da eine Animation viele Eigenschaften kennt, habe ich mit selbst drei kleines Mixins geschrieben, die für so gut wie alle Anwendungsfälle ausreichen sollten. Man muss zwar jede Eigenschaft einzeln definieren, hat damit aber volle Freiheit bei der Gestaltung der Animation und muss nicht auf fest definierte Mixins für bestimmt Animationen zurückgreifen. Die Mixins sind wie folgt definiert:

_animations.scss

@mixin animation($value) {
	-webkit-animation: unquote($value);
	   -moz-animation: unquote($value);
	     -o-animation: unquote($value);
	        animation: unquote($value);
}
 
@mixin animation-property($property, $value) {
	-webkit-animation-#{$property}: unquote($value);
	   -moz-animation-#{$property}: unquote($value);
	     -o-animation-#{$property}: unquote($value);
	        animation-#{$property}: unquote($value);
}
 
@mixin keyframes($name) {
	@-webkit-keyframes #{$name} { @content; }
	   @-moz-keyframes #{$name} { @content; }
	     @-o-keyframes #{$name} { @content; }
	        @keyframes #{$name} { @content; }
}

Im ersten Mixin werden die Eigenschaften definiert, die mindestens bei einer Animation angegeben werden müssen. Das sind meistens ein Name sowie die Animationsdauer. Mit dem zweiten Mixin kann eine beliebige Eigenschaft definiert werden, deren Name als zweiter Parameter übergeben wird. Mit dem letzten Mixin kann man für die verschiedenen Browser die Keyframes definieren.

Beispiel

In meinem konkreten Anwendungsfall wollte ich eine Animation in einer Endlosschleife durchlaufen lassen. Genau diese Eigenschaft, konnte ich aber in der gefundenen Mixins auf Github nicht finden. Meine Lösung sah mit meinen Mixins wie folgt aus:

button {
	&.working {
		@include animation('working-bg 0.5s');
		@include animation-property('iteration-count', 'infinite');
	}
}
@include keyframes('working-bg') {
	from { background-color: rgba(#090, 0); }
	to { background-color: rgba(#090, 0.5); }
}

Ich setze also hier also zuerst die Animation, dessen Keyframes im Anschluss definiert wurden. Anschließend setze ich dann die Eigenschaft animation-iteration-count über das Mixin animation-property. Das fertige Beispiel zeigt dann einen Button, der während die Aktion ausgeführt wird, eine Animation auf die Hintergrundfarbe ausführt.

Fazit

Mit diesen drei Mixins kann man Hilfe von SASS sehr einfach browserübergreifend Animationen definieren und dabei alle möglichen Eigenschaften beeinflussen. Eine sehr umfangreiche Datei mit einem Mixin für jede denkbare Animation ist also nicht notwendig.

Ich hoffe, ihr könnt dieses Mixin auch in einem eurer nächsten Projekte sinnvoll einsetzen. Wenn ihr Anmerkungen oder Verbesserungsvorschläge habt, dann könnt ihr auch gerne direkt das Gist dazu bei Github kommentieren.