Transition – auslösende Events

CSS Transitions werden durch Events – Ereignisse – ausgelöst. Die einfachsten auslösenden Ereignisse sind die Pseudo-Klassen :hover und :focus.

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

Die Zustände :valid und :invalid gehören zu den neuen Attributen für Eingabefelder (HTML5).

Auf Touch-Devices gibt es aber kein hover, sondern touch-Events. Aber es gibt nichts, was äquivalent zum Hovern agiert, 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.

CSS Transition starten, wenn sie in den Viewport kommt

CSS transition ist letztendlich genauso wie Keyframe-Animationen auf kleine Javascripts 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.

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>

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>

Mehr als eine transition

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 }

Bilder mit transition weich überblenden

CSS transition kann Bilder weich überblenden. Die Bilder liegen absolut positioniert in einem relativ positionierten Block. Beim hovern wird das obere Bild durch opacity ausgeblendet. Mit 1s für den Übergang entsteht das weiche Einblenden des unten liegenden Bildes.

<div id="blend" style="width:600px; height:250px;">
<img src="image-1.jpg"  />
<img id="top" src="image-2.jpg"  />
</div>

CSS für das weiche Überblenden

#blend { position: relative }

#blend img#top:hover { opacity:0 }

#blend img { position: absolute; 
    top: 0; left: 0; opacity: 1;    
    transition: opacity 1s
}
Mit Browser-Präfix!

CSS transform verändert die Position, Lage, Größe und Form eines Elements und liefert zusammen mit transition einfache Animationen, die an Flash anknüpfen.

CSS transition ist auch Ende 2013 noch ein Working Draft 19 November 2013 und kann bis zur endgültigen Version geändert werden.