CSS, HTML und Javascript mit {stil}

CSS transition • Animationen und Effekte

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. transition funktioniert allerdings nicht als Übergang von display:none zu display:block.

Bis auf Internet Explorer 9 unterstützen alle modernen Browser heute CSS transition ohne Browser-Präfix.

CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig in allen Browsern. Animationen 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:fokus { 
border-bottom-color: blue; 
}

Stackoverflow CSS für input placeholder ändern

Wenn der Browser transition nicht unterstützt, werden die Stile dennoch angewendet, allerdings sofort: Klick, Klack.

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

Die einfachsten auslösenden Ereignisse sind :hover und :focus.

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><div class="button" style="background: orange"></div>
        <img src="accordion-3.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 kommt langsam zum Stehen kommt. Die Bewegung einer Billardkugel beginnt schnell, aber über die Zeit bewegt sie sich immer langsamer.

Bewegungsabläufe werden durch Easing umgesetzt. Beim Easing bleibt die Zeit 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 }

Transition – auslösende Events

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 hovern, 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 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. Allerdings wird classList von IE8 und IE9 genauso wenig unterstützt wie CSS transition.

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.