CSS, HTML und Javascript mit {stil}

CSS Animationen mit Keyframes

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 sie sind mit einer Liste von Zuständen ausgestattet. Eigenschaften wie delay, iteration-count und direction steuern keyframes-Animationen.

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-Regeln sind Variablen, ähnlich wie Variablen einer Programmiersprache. Eine @keyframes-Regel kann sie 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) }
}

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 starten

Das CSS Animations Module 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 :hover, :active und :focus. Javascript kann Animationen bei beliebigen Aktionen und Events starten und hat drei besondere Ereignisse für CSS-Animationen: animationstart, animationend und animationiteration.

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

keyframes-Animationen können heute in den modernen Browsern ohne Browser-Präfix verwendet werden.

Media Queries können Animationen für unterschiedliche Viewports einrichten. IE 10 und IE11 ignorieren allerdings Animationen, die in Media Queries vereinbart werden. 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.