An dieser Stelle habe ich euch bereits erste Schritte und Möglichkeiten von CSS Animationen vorgestellt. Am Ende stand auch ein kleines Beispiel, welches erst mal dazu diente, die Thematik zu erfassen. Heute wollen wir euch ein schöneres Beispiel aus dem echten Leben eines Web Entwicklers vorstellen: Eine Loading Animation mit reinem CSS umgesetzt.
Für die Umsetzung benötigt es nicht viel. Zum einen ein HTML-Element
<div class="loading"></div>
Zum anderen muss das Element mit CSS optisch aufgewertet werden, damit es später für unsere Loading-Animation genutzt werden kann. Zu Beginn wie folgt:
.loading {
width: 120px;
height: 18px;
background-repeat: no-repeat;
background-color: #fff;
}Ziel ist eine Animation mit drei Vierecken, die wechselseitig größer und kleiner werden, sowie ihre Farbe verändern. Von einem dunklen grau in ein helleres. Am Ende des Artikels findet ihr ein Link zum Beispiel, um die Animation im Detail nachvollziehen zu können. Um diese Anforderung umsetzen zu können, nutzen wir die Möglichkeit mehrere Hintergrundbilder in einem Element platzieren zu können. Um die verschiedenen Zustände dabei nicht in einem Dutzend Bilder vorhalten zu müssen, bedienen wir uns der Eigenschaft linear-gradient. Mit ihr erzeugen wir einfach "Bilder" wie auf einer Leinwand oder canvas. Zum Start ein erstes Viereck:
background-image:
linear-gradient(0deg, #ababab 1px, transparent 0, transparent 9px, #ababab 1px),
linear-gradient(90deg, #ababab 1px, #f4f4f4 0, #f4f4f4 9px, #ababab 1px),In der Folge legen wir einfach weitere Bilder an, die sich in der Größe und Farbe entsprechend unseren Vorstellungen eines Loaders verändern. Diese müssen dann nur noch mittels background-position und background-size positioniert und ausgerichtet werden.
Zur Animation. Diese setzen wir mit der noch experimentellen Technologie der Keyframes um. Trotz des experimentellen Status, ist die Technologie schon recht breit unterstützt:
- Safari 4
- Opera 12
- FF 16
- Chrome
- IE 10
Wie auf Flash-Leinwänden legen wir hier einfach fest, zu welchem Zeitpunkt ein Element X eine bestimmte Form oder Positionierung hat. In unserem Fall einer Loading-Animation verschieben wir die Position der zuvor geschaffenen Vierecke:
@keyframes loading {
17% {
background-position: [...]
}
33% {
background-position: [...]
}
[...]
}Diese Key-Frame Animation müssen wir dann noch unserem Element hinzufügen:
animation: loading .8s steps(1, start) infinite;
und fertig ist unsere CSS Loading Animation. Die Geschwindigkeit kann mit dem .8s Wert verändert werden. Das Beispiel und den kompletten Code dazu, gibts hier zu sehen. Der Loader funktioniert nur in Firefox, der die Standardsyntax bereits komplett unterstützt. Für webkit müsst ihr die entsprechenden Browser-Prefixes voranstellen.
Nun wird sicherlich der ein oder andere sagen; Moment mit einer gif-Animationen die ich in paar Minuten gebaut habe, bin ich doch schneller. Das mag auf dem ersten Blick stimmen. Ich kann aber auch den CSS Code optimieren und z. B. eine Sass-Funktion daraus erstellen, wodurch ich den Loader in jeder Umgebung (verschiedene Hintergründe, Farben und Größen) schnell und unkompliziert einbauen kann, ohne ein Grafik-Tool zur weiteren Bearbeitung benutzen zu müssen.