CSS transition • Animationen und Effekte

Weiche Übergänge bei Animationen

CSS animiert seit langer Zeit HTML-Elemente mit :hover und :focus zuverlässig, aber mit einem harten Übergang wie ein Schalter. Ein subtiler Übergang ist besser nachvollziehbar, z.B., um den Placeholder-Text in einem Eingabefeld weich auszublenden:

input::placeholder {
	color: green;
	transition: color 1.5s;
}

input:focus::placeholder {
	color: silver;
}

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.

Um mehrere CSS-Eigenschaften in einer Transition zu animieren, werden die Eigenschaften in einer Regel nacheinander aufgelistet und durch Kommas voneinander getrennt.

input {
	border:1px solid silver;
}

input:focus {
	border-bottom-color: blue;
	border-bottom-width: 4px;
	transition: border-bottom-color 2s, 
	            border-bottom-width 2s;
}

Stackoverflow CSS für input placeholder ändern

Grundsätzlich wirken Transitionen nur bei absoluten und relativen Werten, z.B. von height: 0px zu height: 100px, von 0% zu 90%, von color: green nach color: red, aber nicht von height: 0px zu height: auto oder top to bottom.

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.

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 ruckartig an und rollt langsam aus.

Bewegungsabläufe werden durch Easing umgesetzt. Easing ändert die Dauer der Animation oder Transformation nicht, 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 startet CSS Transition langsam, beschleunigt in der Mitte und läuft langsamer aus.

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.

transition: left 3s ease;

ease ist der default-Wert (muss eigentlich nicht notiert werden).

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.

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 startet die Transition mit dem Javascript Intersection Observer, wenn das Element in den Viewport kommt. Das braucht kein jQuery, ersetzt das Hovern mit der Maus und funktioniert auch auf Touchscreens.

.wrapper { 
	position: relative;
	height: 100px;
	width: 100%;
}
.rock {
	position: absolute; 
	top:0; left:0;
	width: 100%;
	transition: left 3s 3s;	
}

.slideright {
	left: 100%;
}

.rock img {
	position: absolute;
	left:-200px;
}

<div class="wrapper">
	<div class="rock">
		<img src="rocket.svg" width="180" height="100" alt="Blaue Rakete">
	</div>
</div>

<script>
let flyIn = document.querySelector(".rock");

const options = {
	root: null,
	rootMargin: "0px",
	threshold: 0.7,
};

const callback = function (entries, observer) {
	let observed = entries[0];
	if (observed.isIntersecting) {
		flyIn.classList.add ("slideright");
	}
}

const observer = new IntersectionObserver (callback, options);

if (flyIn) {
	observer.observe (flyIn);
}
</script>

Akkordeon ohne Javascript

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