CSS transition • Animationen und Effekte

Weiche Übergänge bei Animationen

CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern. Effekte mit :hover oder :focus wirken allerdings wie ein Schalter: AN, AUS, AN, Aus. Ein subtiler Übergang ist besser nachvollziehbar, z.B., um den Placeholder-Text in einem Eingabefeld weich auszublenden:

input { 
  border-bottom-color: silver; 
  transition: border-bottom-color 1s;
}

input:focus { 
  border-bottom-color: blue; 
}

Stackoverflow CSS für input placeholder ändern

Grundsätzlich wirken Transitionen nur bei absoluten Werten, z.B. von height: 0px zu height: 100px, aber nicht von height: 0px zu height: auto.

Ab IE10 unterstützen die Browser CSS transition ohne Browser-Präfix. Wenn ein alter Browser transition nicht unterstützt, werden die Stile dennoch angewendet, allerdings sofort: Klick, Klack.

Transition – auslösende Events

Per Vorgabe starten CSS Transitionen beim Laden der Seite. Es gibt aber weitere Ereignisse (CSS Events) um Animationen zu starten: Die einfachsten auslösenden Ereignisse sind die Pseudo-Klassen :hover, :checked und :focus.

CSS transition wird immer dem Ausgangszustand zugewiesen. So können alle Zustände des Elements ebenfalls animiert werden:

Auf Touch-Devices gibt es kein hover, sondern touch-Events, und es gibt kein Äquivalent zum Hovern, denn dafür müsste der Finger auf dem Element bleiben und würde das Element verbergen. :hover als Auslöser einer Animation fällt also fast aus.

Weitere Auslöser für Animationen werden mit Javascript programmiert.

CSS Transition starten, wenn sie in den Viewport kommt

Animationen mit CSS transition sind letztendlich genauso wie Keyframe-Animationen immer wieder auf Javascript als auslösendes Event angewiesen. Beim Eintreten des Events wird dem Element die CSS-Klasse zugewiesen, in der die Transition definiert ist, z.B.

<div class="rakete" ontouchstart="this.classList.toggle('bezierhover')">

Javascript classList fügt Klassen hinzu, entfernt oder toggelt sie. Javascript classList wird (genauso CSS transition) ab IE10 von allen modernen Browsern unterstützt.

Mit wenigen Zeilen Javascript startet die Transition, wenn das Element in den Viewport kommt. Das ersetzt u.U. das Hovern mit der Maus und funktioniert auch auf mobilen Geräten.

.wrapper { position: relative; }
.rocket {
   position: absolute; 
   left: -200px;
   transition: left 3s 3s;	
}

.slideright {
   left: 70%;
}

var elemIsVisible = document.querySelector(".wrapper").offsetHeight;

window.onscroll = function () {
   if (elemIsVisible > 0) {
      document.querySelector(".rocket").classList.add("slideright");
   }
   window.onscroll = null;
}

transition property, duration, timing

transition ist die Kurzschrift für transition-property, transition-duration, transition-timing-function und transition-delay – und zwar in dieser Reihenfolge.

transition-property

Die Eigenschaft, die während des Übergangs geändert wird.

transition-duration

Die Zeit, in der ein Übergang stattfinden soll.

transition-timing-function

Zeitlicher Verlauf des Übergangs (Beschleunigen und Abbremsen). In CSS transiton stecken mehr Finessen als das einfache Verlängern der Zeit für den Übergang.

transition-delay

Zeit bis zum Start des Übergangs.

Auf komplexe Scripte (z.B. mit Javascript setInterval) können viele Animationen dank CSS verzichten und dennoch raffinierter gestaltet werden.

Akkordeon ohne Javascript

Nur zwei transition-Eigenschaften müssen hinzugefügt werden, um einen weichen Übergang zu erzielen:

• welche Eigenschaft animiert werden soll,
• wie lange der Übergang dauern soll.

accordion hat zwei Transitionen:

• #accordion div:hover öffnet das accordion
• #accordion div schließt das accordion

#accordion div {
   background-color: #b2ce8f;
   height:50px;
                  +--- Eigenschaft, die geändert 
                  |    werden soll
                  |           +--- zeitlicher Verlauf
                  |           |    der Transition
                  |           |
   transition: height 1s ease-in-out;
                       ^
                       |
                       +--- Dauer
}

#accordion div:hover {
   background-color: #efd070;
   height: 140px; 		
}

<div id="accordion">
   <div>
      <div class="button" style="background: orange"></div>
      <img src="accordion-1.png">
   </div>
   <div>
      <div class="button" style="background: orange"></div>
      <img src="accordion-2.png">
  </div>
…
</div>

Nicht ganz so einfach aufgebaut, dafür aber auch auf Touchscreens funktionsfähig sind CSS Animationen, die auf Auslöser wie : checked aufbauen: CSS Accordion ohne Javascript

CSS Easing

Ein linearer Bewegungsablauf würde in den meisten Animationen mechanisch und unnatürlich wirken. Eine Lokomotive startet langsam, wird schneller und bremst langsam. Eine Billardkugel läuft stoßartig an und rollt gegen Ende immer langsamer.

Bewegungsabläufe werden durch Easing umgesetzt. Beim Easing bleibt die Dauer der Animation oder Transformation konstant, aber die Bewegung wird neu verteilt: Am Anfang sind die Distanzen oder Änderungen z.B. größer (schnelle Bewegung), am Ende der Animation werden die Distanzen kleiner (langsame Bewegung).

CSS bringt typische Bewegungsmuster mit:

ease

Ohne weitere Angaben starten Transitions mit CSS langsam, beschleunigen in der Mitte und werden am Ende wieder langsamer.

linear

ist eine gleichförmiger Übergang.

ease-in

beginnt langsam und wird schneller.

ease-out

beginnt schnell und läuft langsamer aus.

ease-in-out

kombiniert das langsame Anlaufen mit einem langsamen Auslaufen, aber einem deutlich schnelleren Teil in der Mitte.

cubic-bezier(x1,y1,x2,y2)

ist Fine-Tuning für den Verlauf der Animation. Dabei steht das erste Paar (x1,y1) für das Start-Handle der Bezierkurve, das zweite Paar (x2,y2) für das Ende der Bezierkurve.

steps (steps, step-start)

Bei steps läuft die Änderung in steps Intervallen ab. Der optionale Parameter step-start bestimmt, dass die Änderung am Anfang jedes Intervals passiert.

steps (steps, step-end)

Die Änderung passiert am Ende jedes Intervals.

.elem { transition: opacity 2s ease-out }

Wird durch :hover ausgelöst. Da offenbaren sich schon bei einer so einfachen Animation die Unterschiede: Firefox führt die Animation nur so lange aus, wie der Cursor auf der Rakete liegt, Chrome, Safari und IE spielen die Animation komplett ab, wenn der Cursor auf dem ursprünglichen Platz des animierten Elements bleibt.

<div class="bezier">cubic-bezier</div>

.bezier { float:left;
  transition-timing-function: cubic-bezier(0.7,0.1,0.8,0.2); 
  transition-property: margin-top;
  transition-duration: 2s }

.bezier:hover { margin-top: -500px }

Transition mit Cubic Bézier

Wenn die Kontrollpunkte der Cubic-Bézier-Kurve über den Bereich zwischen 0 und 1 hinausgezogen werden, entstehen komplexe Bewegungen wie ein Abprallen oder das Bumpern bei einem Flipper. Dabei dürfen x1 und x2 nur nicht kleiner als 0 und nicht größer als 1 werden, y1 und y2 hingegen sehr wohl.

.simple {
   border-radius:50%;
   transition: transform cubic-bezier(0.5, 1.8, 0.8, 0.5) 2s;
}

.simplebump {
   transform: translateX(200px);      // entlang der X-Achse bewegen
}

<button onclick=".simple.classList.toggle('simplebump')">
   Und ab die Post
</button>

Mehrere Transistions

Um mehrere CSS-Eigenschaften in einer Transition zu animieren, werden die Eigenschaften in einer Regel nacheinander aufgelistet.

div:hover img[src="bild.png"] { 
transform: rotate(780deg)scale(0.5,0.5);
transition: 5s }