CSS3-Transitions für komplexe Animationen kombinieren

Animierte Übergänge sind dank CSS3-Transitions mit wenig Aufwand möglich und werden mittlerweile ganz selbstverständlich eingesetzt. Dabei kannst du verschiedene Eigenschaften gleichzeitig verändern. Es gibt aber auch die Möglichkeit, die zu animierenden Eigenschaften zu unterschiedlichen Zeiten und mit unterschiedlicher Länge abzuspielen.

CSS3-Transitions für komplexe Animationen kombinieren

Transitions mit Delay

Die „transitions“-Eigenschaft kennt vier unterschiedliche Werte. Der erste Wert teilt mit, welche Eigenschaften per Transition animiert werden sollen. Während „all“ einfach alle Eigenschaften animiert – insofern es etwas zu animieren gibt –, kannst du auch einfach eine explizite Eigenschaft angeben.

Der zweite Wert steht für die Animationsdauer in Sekunden an und der dritte Wert für das Easing – zum Beispiel „ease“ „ease-out“ oder „ease-in“. Außerdem existiert als viertes noch die Möglichkeit, einen zeitlichen Versatz zu definieren. Hierüber teilst du also mit, dass die Transition erst nach einer bestimmten Zeit beginnen soll.

div {
  transition: all 2s ease 1s;
  border-radius: 0;
  transform: rotate(45deg);
}

div:hover {
  border-radius: 100%;
  transform: rotate(90deg);
}

Im Beispiel werden die Werte für „border-radius“ und „transform“ per Hover verändert. Die Animation dauert zwei Sekunden, beginnt aber erst mit einer Sekunde Versatz.


Transitions mit gleichzeitig animierten Eigenschaften

Mehrere Transitions kombinieren

Den hier vorgestellten Weg kennen wohl die meisten. Er hat jedoch den Nachteil, dass die Transitions für alle Eigenschaften – im Beispiel also „border-radius“ und „transform“ – gleichzeitig ablaufen. Mit einer leicht veränderten Auszeichnung weist du beiden Eigenschaften jedoch eine individuelle Animationsdauer sowie eine jeweils eigene Verzögerung zu.

div {
  transition: transform 0.5s ease, border-radius 1s ease 0.5s;
  border-radius: 0;
  transform: rotate(45deg);
}

Im zweiten Beispiel werden über „transition“ für jede zu animierende Eigenschaft eigene Werte übergeben und diese per Komma voneinander getrennt. Die Animation der „border-radius“-Eigenschaft startet hierbei also erst eine halbe Sekunde, nachdem die Animation der „transform“-Eigenschaft begonnen hat.

kombinierte-transitions2
Transitions mit unabhängig voneinander animierten Eigenschaften

Auf diese Weise realisierst du durchaus komplexe Hovereffekte, ohne JavaScript bemühen oder HTML-Elemente verschachteln und einzeln mit einem Transition-Effekt ausstatten zu müssen.

Im Übrigen bleibt die Animationsfolge auch bei der rückwärts laufenden Bewegung erhalten. Hierbei wird also zuerst „transform“ animiert und anschließend „border-radius“.

Vorteil gegenüber „@keyframes“ und „animation“

Natürlich ist es auch mit der CSS3-Eigenschaft „animation“ in Kombination mit der „@keyframes“-Regel möglich, solche komplexen Animationen zu definieren. Transitions haben jedoch den Vorteil, dass sich beim Wechsel der Klasse oder Pseudoklasse der animierte Übergang automatisch anpasst.

Verlässt du also vor Vollendung der Übergangsanimation den Hover-Status, wird die Animation automatisch wieder zum ursprünglichen Aussehen zurück animiert. Bei „animation“ und „@keyframes“ hast du dieses Verhalten nicht.

Allerdings haben die hier vorgestellten Transitions auch ihre Grenzen – zum Beispiel dann, wenn man unabhängig voneinander verschiedene „transform“-Effekte animieren will – also „scale()“ und „rotate()“ zum Beispiel. Beides definierst du schließlich über dieselbe Eigenschaft. Will man hier ebenfalls unabhängige Animationen haben, muss man doch „@keyframes“ und „animation“ einsetzen.

Beispiel auf Codepen

(dpe)

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Stefan
Gast
Stefan
7 Monate 13 Tage her

Danke! Hab’s gleich mal in einem Pen getestet: http://codepen.io/anon/pen/jWLajQ

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen