Animationen mit CSS und JavaScript

k-webs-banner-verlauf

Kleine Animationen dienen im Web oftmals als Eyecatcher oder um komplexere Prozesse darzustellen. Häufig genügen dabei einfache GIFs, bei denen mehrere statische Bilder nacheinander abgespielt werden (hier ein Beispiel GIF aus unserem letzten Thema des Monats). Sobald aber fliessende Übergänge gewünscht werden oder mehrere Layer nebeneinander erscheinen sollen, ist man mit echten Animationen via CSS oder JavaScript besser bedient. Ich werde im Folgenden zwei gängige Möglichkeiten etwas näher beleuchten.

CSS Transitions

CSS3 bietet immer mehr Möglichkeiten Inhalte auch dynamisch zu verändern, ohne dabei auf JS zurückgreifen zu müssen. Eine Möglichkeit sind Transitions, mit welchen die Änderungen einer CSS Property animiert werden können. In diesem Beispiel verändern wir verschiedene CSS Properties on :hover

Transition

 

Das CSS hierzu sieht folgendermassen aus:

.trans-box {
 width: 100px;
 height:100px;
 border: 1px solid #ff3500;
 display: flex; 
 justify-content: center;
 align-items: center;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
}
.trans:hover .trans-box {
 margin-left: 300px;
 width: 80px;
 height: 80px;
 border-radius: 50%;
 border-color: #777;
 -ms-transform: rotate(90deg); /* IE 9 */
 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
 transform: rotate(90deg);
}

Die Transition sorgt dafür, dass jeder Zwischenschritt automatisch berechnet wird. Die Dauer ist hier auf 1 Sekunde gestellt. Das ease-in-out ist hierbei die Kurve, in der die Transition verläuft. Diese kann auch als Bezier-Kurve angegeben werden, um den Verlauf etwas interessanter zu gestalten. Mit dem Ceaser Tool von Matthew Lein kann der CSS-Code für beliebige Bezier-Kurven erstellt werden. Und auf cubic-bezier.com kann der Effekt unterschiedlicher Verläufe getestet werden. In unserem Beispiel haben wir zusätzlich noch den Text innerhalb der Box animiert, um einen anderen Verlauf darzustellen.

Insgesamt können mit Hilfe der Transition Property eine Menge schöner Animationen erstellt werden. Diese sind allerdings immer auf einen Trigger (hier :hover) festgelegt und laufen dann üblicherweise nur einmal ab. Zudem kann nur eine Änderung von A nach B festgelegt werden. Es kann also ein Farbwechsel von Rot nach Grau definiert werden. Ein weiterer Schritt nach Grün ist mit Transitions nicht einfach machbar.

Animationen mit CSS Keyframes

Hier kommt eine weiterer Ansatz ins Spiel: Keyframes. Diese sind DIE Lösung für reine CSS-Animationen, die trotzdem etwas mehr Komplexität erfordern. Ein sehr simples Beispiel ist der ˅ Pfeil auf dieser Website: urfocus.ch. Beim Hovern über den Pfeil, springt dieser kurz.

Im folgenden Beispiel ändern wir wieder mehrere Properties. Dieses Mal können wir aber auch Zwischenschritte definieren, wie z.B. für den border-radius, welcher von 0% über 50% zu 15% wechselt.

Keyframe

 

Und so werden Keyframes definiert:

@keyframes box {
 0% {top: 0px;}
 5% {top: 5px;}
 15% {top: -15px;color:#ff3500;}
 50% {top: 0px;color:red;border-radius: 50%;}
 75% {top: -10px;color:#777;}
 100% {top: 0px;margin-left:300px;color:green;border-radius: 15%;}
}

.key-box {position: relative;}

.key:hover .key-box {
 animation-name: box;
 animation-duration: 3s;
 animation-iteration-count: 2;
 animation-direction: alternate;
}

Im ersten Abschnitt wird die Animation als @keyframe definiert, wobei der Name jump-right eine Variable ist, die frei gewählt werden kann. Der Zeitverlauf wird in Prozent angegeben und richtet sich nach der animation-duration, die für jedes Element dann bestimmt werden kann. Anschliessend wird die Animation über den Namen dem Element zugewiesen. Neben dem animation-name und der –duration können auch ein -delay und ein -iteration-count angegeben werden um die Animation verzögert und mehrere Male hintereinander abzuspielen. Zuletzt lässt sich über die animation-direction auch noch angeben, ob die Animation vorwärts, rückwärts oder sogar alternierend abgespielt werden soll.  Dies sind grosse Unterschiede zu GIFs und normalen Transitions, welche nur einfach ablaufen.

CSS vs JavaScript

An dieser Stelle wollte ich darüber schreiben, dass Keyframes im Vergleich zu Animationen mit JS und jQuery deutlich eingeschränkter sind. Dabei stellte sich für mich selbst aber die Frage: was kann ich mit Keyframes NICHT realisieren? Testweise habe ich versucht diesen Banner, welchen wir mittels jQuery und sogar einer jQuery UI-Funktion gestaltet hatten, mit reinem CSS nachzubauen. Und tatsächlich war dies erstaunlich einfach:

 

Dieses Angebot dient hier als Beispiel!

 

Diese Version des Banner benötigt statt 9 Requests und knapp über 100kb nur noch 7 Requests und unter 65kb. Das Timing ist hier noch nicht exakt wie im JS-Banner, aber dies wäre mit etwas Feinarbeit problemlos möglich. Ich habe hier einfach die Animation der einzelnen Elemente immer auf 10 Sekunden gesetzt und die einzelnen Schritte in etwa in Prozent übertragen. Insgesamt brachte der Verzicht auf JavaScript also deutliche Verbesserungen, ohne die Darstellung zu verschlechtern. Aber welche Vorteile bringt dann der Einsatz von JS?

Die Vorteile von JavaScript

Natürlich bringt der Einsatz von JavaScript eine Fülle von Funktionen mit sich, welche nach wie vor nicht mit reinem CSS möglich sind. Für unseren Use-Case wäre es beispielsweise interessant, den Banner erst dann zu starten, wenn er innerhalb des sichtbaren Bereichs erscheint. Der Start könnte auch über andere Userinteraktionen getriggert werden, welche über CSS bisher nicht abgefangen werden können. Insgesamt sind die Möglichkeiten mit JavaScript, jQuery und weiteren Libraries praktisch unbegrenzt, und in vielen Fällen lohnt sich deren Einsatz, auch wenn hierfür weitere Files geladen werden müssen.

Fazit

Animationen sind Hingucker und werden in den unterschiedlichsten Fällen angewendet. Die einfachste Möglichkeit bewegte Inhalte ins Web zu stellen, sind vermutlich nach wie vor GIFs. Allerdings sind die Möglichkeiten etwas innerhalb eines GIFs darzustellen stark begrenzt. Für einfache Animationen eignen sich CSS Transitions, mit welchen Übergänge zwischen zwei Status abgespielt werden können. Echte Animationen dagegen ermöglichen Keyframes, welche sich als echte Konkurrenz zu JavaScript entpuppt haben. Sie sind relativ einfach zu definieren und benötigen keine zusätzlichen Libraries oder übermässig viel Code. JavaScript dagegen kann so tiefgreifend in den Aufbau und die Interaktionen mit einer Website eingreifen, dass seine Einsatzmöglichkeiten beinahe unbegrenzt zu sein scheinen. Dennoch schadet es nicht sich hin und wieder die Frage zu stellen, ob dieselben Funktionen nicht auch mit reinem CSS möglich wären.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.