CSS, HTML und Javascript mit {stil}

CSS transition • Animationen und Effekte

CSS transition: slide-up, slide-down, fade-in, fade-outcss transition

Slide up, Slide Down
Pures CSS ohne jegliche Beigabe

CSS transition ändert den Wert einer CSS-Eigenschaft über die Zeit. Dabei entstehen Übergänge wie das Ein- und Ausblenden und Bewegen von HTML-Elementen ohne Javascript oder Flash.

Das W3C listet knapp 50 Eigenschaften von background-color über font-size, text-shadow bis z-index, die sich mit CSS transition animieren lassen. Die Daumenregel lautet: CSS-Eigenschaften mit absolute Werte wie px oder % lassen sich animieren, aber nicht mit Keywords wie top, right, auto.

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

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:

:hover
:target
:focus
:checked
:active
:disabled

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
height mit weicher Transition ändern
#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 }
GeschwindigkeitZeitGeschwindigkeitZeitx1,y1x2,y200.510.51000.510.510easecubic-bezier(0.7, 0.1, 0.8, 0.2)x1,y1x2,y2

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>
Cubic Bézier für das Abprallen eines Objekts am Ende der Strecke (bumpern)0.5, 1.80.8, 0.5

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 Transition Slide2 CSS Transition Slide1

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.