CSS, HTML und Javascript mit {stil}

CSS Keyframes - Animationen

CSS keyframes Animationen mit animation play state, duration

CSS-Animationen werden durch die @keyframes-Regel erzeugt – einer Liste von CSS-Eigenschaften, die in einzelnen Schritten (Frames) mit weichen Übergängen geändert werden sollen.

@keyframes-Animationen ähneln CSS transition, aber anders als Transitions setzen CSS-Keyframes eine Animationen automatisch und kontinuierlich in Kraft, und nicht als Reaktion auf ein Event wie ein Mausklick, ein Hovern der Maus oder ein Touch.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Die zwei Schritte zur Animation

Jede Animation besteht aus zwei Schritten:

  • der Definition der Animation in der @keyframes-Regel
  • dem Aufruf der der keyframe-Regel im CSS-Selektor des HTML-Elements
CSS Animation Beach Absolut positioniert Animation drehender Schlüssel Animation Spielzeugauto Rotes Auto Qualmwölkchen

@keyframes-Regel

Keyframes-Animationen werden in der keyframes-Regel mit einer Liste von Zuständen ausgestattet und steuern die Animation mit duration (Dauer), delay (Verzögerung), iteration-count (Zahl von Durchläufen) und direction (vorwärts oder rückwärts).

@keyframes-Regeln sind Variablen, ähnlich wie Variablen einer Programmiersprache. Eine @keyframes-Regel kann mehreren Elementen mit unterschiedlichen Eigenschaften zugewiesen werden.

<img class="qualm" src="qualm.png" width="301" height="125" alt="Qualmwölkchen">
--------------------------------------------------------------------------------

.qualm{
    animation-name: smoke;                // Name der Animation
    animation-duration: 5s;               // Dauer der Animation
    animation-iteration-count: infinite;  // Anzahl der Wiederholungen
}


    +--- Regel
    |
    |        +--- Name der Animation
    |        |
@keyframes smoke {
    from {  transform: translateX(0px)    }
    to   {  transform: translateX(-100px) }
}

Download: keyframes-Animtion animation-beach.zip

Am Rande: Anstelle von CSS translate: transform könnten auch top / right / bottom / left benutzt werden. Aber CSS translate ist – anders als left, top, right, bottom – Hardware-beschleunigt.

Im einfachsten Fall entsteht eine Animation durch eine CSS keyframes-Regel mit zwei Keyframes. Die Keyframes definieren die CSS-Eigenschaften, zwischen denen die Animation einen weichen Übergang tweent. Mit dem Namen wird die Animation an einen oder mehrere Selektoren gebunden.

Animationen mit @keyframes werden von allen Browsern unterstützt, auch von IE ab Version 10. Die aktuelle Browsergeneration braucht keinen Browser-Präfix.

Animation auslösen und verzögern mit animation-delay

Das CSS Animations-Modul lässt sich nicht darüber aus, welche Ereignisse eine Animation starten, sondern legt nur fest, was in einer Animation passiert. Ohne weitere Angabe starten CSS-Animationen, wenn die Seite geladen wurde.

Weitere Auslöser für Animationen sind z.B. : checked, : hover, : active und : focus.

Manchmal braucht eine Animation aber nur eine Verzögerung für bestimmte Elemente, so z.B. eine einfache Slideshow mit CSS, bei der das zweite, dritte Bild mit einer Verzögerung angezeigt wird. animation-delay verzögert den Start der Animation um eine bestimmte Zeit.

HTML
<input type="checkbox" id="bluecarcheck">
<label for="bluecarcheck">Starten</label>
<div id="blue-car">
    <img src="bluecar.png" width="150" height="90">
</div>

Die Animation wird durch einen Klick auf die Checkbox ausgelöst, startet aber erst mit einer Verzögerung von 2 Sekunden. Bei zwei Zeitangaben ist die erste Zeit (4s) die Dauer der Animation, die zweite (2s) die Verzögerung.

CSS
#blue-car { position: absolute;  }
#bluecarcheck:checked ~ #blue-car { 
   animation-name: Wait-And-Start;
   animation-duration: 4s;
   animation-delay: 2s; 
   animation-fill-mode: forwards;
}
@keyframes Wait-And-Start {
    from { transform: translateX(0) }
    to   { transform: translateX(200%) }
}

animation-fill-mode: forwards ist die Anweisung, die Eigenschaften der Animation nach dem Ablauf beizubehalten, damit das Elemente am Ende nicht zurückspringt.

: hover war einst die beliebteste Methode, um die Animation beim Hovern mit der Maus zu starten, aber wir mussten schnell feststellen, dass die Touchscreens dabei nicht mitspielen.

Beispiel für das Starten der Animation über versteckte Radio-Buttons und den Pseudo-Selektor checked: CSS-Accordion ohne Javascript.

Javascript kann Animationen bei beliebigen Aktionen und Events starten und hat drei spezielle Ereignisse für CSS-Animationen: animationstart, animationend und animationiteration.

Intersection Observer: Animation starten, wenn sie in den Viewport kommt

Damit eine Animation erst startet, wenn der Benutzer weit genug gescrollt ist, muss Javascript eingesetzt werden. Der IntersectionObserver braucht nur wenige Zeilen.

var io = new IntersectionObserver ( (entry) => {
	document.querySelector(".crossing").classList.add("swimming");
}
io.observe (document.querySelector(".turtle"));

Der IntersectionObserver steht in allen modernen Browsern, nur IE11 (Support wurde am 30.11.2020 eingestellt) ist nicht dabei.

Mehr als zwei Keyframes

from / to erzeugt immer zwei Keyframes. Mit Prozentangaben von 0% für den ersten Keyframe bis 100% für den letzten Keyframe anstelle von from und to erzeugt die Animation mehr als zwei Keyframes.

Straße mit Häusern rotelok 
.lok  { 
   animation-name: movelok;
   animation-duration: 8s;
   animation-play-state: paused }

@keyframes movelok {
   0%   {  transform:translate(0)    }
   36%  {  transform:translate(150%) }
   70%  {  transform:translate(150%) }
   100% {  transform:translate(400%) }
}
  • animationduration:8s ist die Dauer der Animation.
  • animation-play-state hat zwei Zustände: running und paused.
    running ist die Vorgabe: Die Animation startet beim Laden der Seite.
    Mit animation-play-state:paused läuft die Animation nicht beim Laden der Seite an, sondern wird durch ein Event getriggert.

Responsive Keyframes-Animationen

Media Queries können Animationen für unterschiedliche Viewports einrichten. IE11 ignoriert Animationen, die in Media Queries vereinbart werden, aber dieser Oldies spielt nicht mehr mit. In einfachen Animation wie der kleinen Lok, die am Bahnhof kurz anhält, lässt sich diese Einschränkung durch relative Werte (Prozentangaben) für die Bewegungen lösen.

#station { position: relative; width: 300px; height: 115px;  margin: 1em auto; overflow: hidden}
.lok  { position:absolute; width: 40%; bottom: 5px; left:-50%; animation: movelok 8s; animation-play-state: paused }

@keyframes movelok {
	0% {  transform:translate(0)    }
    36%   {  transform:translate(150%) }
    70%   {  transform:translate(150%) }
    100%   {  transform:translate(400%) }
}

@media (min-width: 600px) {
	#station { width: 600px; height: 230px; }
	.lok  { bottom: 10px; }
}

Die Media Query verändert ausschließlich die Größe und Position der HTML-Elemente. Die Keyframes-Regel muss nicht geändert werden.

will-change

will-change informiert den Browser, welche Eigenschaften eines Elements durch eine Animation verändert werden könnten. So kann sich der Browser besser auf Änderungen vorbereiten und u.U. eine schneller anlaufende und weichere Animation liefern.

Die folgenden Werte stehen zur Verfügung:

auto
fordert die standardgemäße Optimierung des Browsers an.
scroll-position
Informiert den Browser, dass die Scrollposition eines Elements animiert werden kann, damit der Browser sich besser auf einen aktuell noch nicht sichtbaren Bereich einrichten kann.
contents
Der Inhalt eines Elements kann durch eine Animation geändert werden – der Browser soll den Inhalt nicht in den Cache aufnehmen.
<custom-ident>
Benutzerdefinierte Eigenschaft wie background-color oder opacity, für die eine Animation auf dem Plan steht.