CSS, HTML und Javascript mit {stil}

CSS Animationen mit Keyframes

CSS3-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

CSS Keyframes sind ein Novum in CSS – nicht einfach nur eine neue Regel. @keyframes-Regeln sind Variablen, ähnlich wie Variablen einer Programmiersprache. Wenn die @keyframes-Regel festgelegt wurde, 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.

Animation fill mode

Ohne weitere Angaben setzt die Keyframes-Animation das Element am Ende unverzüglich ohne weichen Übergang zurück auf die anfänglichen Eigenschaften.

CSS Keyframe-Animation: Rollender Ball

Der Flip zurück auf die ursprünglichen Eigenschaften entsteht auch, wenn die Animation nicht durch ein Javascript getriggert wird. Der Sprung zurück ist die Voreinstellung.

animation-fill-mode legt fest, ob die Animation am Ende zurückspringt (backwards – default) oder mit den Eigenschaften des letzten Keyframes endet (forwards).

#ball {
    animation-name: ball; 
    animation-duration: 5s;
}

@keyframes ball {
    from  { transform: translateX(0)     rotate(0deg) }
    to    { transform: translateX(500px) rotate(720deg) }
}
animation-fill-mode
none zurück zum initialen Zustand am Ende der Animation
backwards bleibt beim ersten Keyframes stehen
wendet die Eigenschaften vor dem ersten Keyframe an
forwards bleibt beim letzten Keyframes stehen
wendet die Eigenschaften nach dem letzten Keyframe an
both bleibt beim letzten Keyframe stehen
wendet das CSS vor dem ersten und nach dem letzten Keyframe an
backwardsEigenschaften vor demersten Keyframebothwendet die Eigenschaftenvor dem Start und am Endeder Animation anforwardsEigenschaften nach demletzen Keyframe
CSS Keyframe Animation Rollender Ball
#stoppedBall {
    animation-name: ball; 
    animation-duration: 5s;
    animation-fill-mode:forwards;
}

Die Animation nutzt dieselbe keyframes-Regel wie das vorangegangene Beispiel, aber der Ball ist jetzt mit animation-fill-mode:forwards definiert.

CSS animation direction

direction bestimmt, in welcher Reihenfolge die Keyframes einer Animation ausgeführt werden.

animation direction
normalvom ersten Keyframe zum letzten Keyframe
reversevom letzten Keyframe bis zum ersten Keyframe
alternateändert die Richtung bei jeder Iteration der Animation
alternate-reversewie zuvor, aber beginnt beim letzten Keyframe
CSS Animation: Rollender Ball CSS Animation: Rollender Ball
#backAndForth, 
#forthAndBack { 
   position: absolute; 
   width:20%; 
   bottom: 5px
}
#backAndForth { 
   animation: ball 4s alternate forwards; 
   animation-iteration-count: 2;
   animation-play-state: paused;
}
#forthAndBack { 
   animation: ball 4s alternate-reverse forwards; 
   animation-iteration-count: 2;
   animation-play-state: paused;
}

Die Animation nutzt wieder @keyframes ball wie die vorangegangenen Beispiele. Damit die Richtung durch animation-direction: alternate geändert wird, muss animation-iteration-count größer als 1 sein.

Animation easing – timing-function

Damit Animationen natürlich wirken, dürfen sie nicht plötzlich anspringen und nicht von einem auf den nächsten Augenblick enden. Natürliche Bewegungen beginnen mit einer kleinen Verzögerung, der Anlauf braucht Kraft, dann kommt die Bewegung in Fahrt. Am Ende verlangsamt sich eine Bewegung meist kurz bevor sie endgültig stopt. Das gilt für die Lokomotive im Beispiel oben, für einen laufenden Menschen und genauso für animierte Elemente der Navigation.

Abruppte Bewegungen wie der Wechsel von einer Farbe auf die nächste beim hovern über einen Button empfinden wir als mechanisch oder künstlich.

Die 12 Prinzipien der Animation

Animationen mit CSS bringen die Eigenschaft »timing« mit, die für organische Bewegungen der animierten Objekte sorgt.

easeVorgabe, start etwas langsam, beschleunigt, bremst ab
linearKonstante Geschwindigkeit über die gesamte Animation, wirkt mechanisch
ease-instartet langsam und beschleunigt gegen Ende der Animation
ease-outstartet schnell und bremst gegen Ende der Animation
ease-in-outstartet langsam, beschleunigt in der Mitte der Animation und bremst wieder gegen Ende der Animation, ähnlich wie ease, aber dramatischer.

Mehr zu easing

Bezier-Curves

Ceaser CSS EASING ANIMATION TOOL

CSS-Animationen steuern

@keyframesDefiniert die Animation
from - toZustand beim Start und beim letzten Keyframe der Animation
0% - 100%Liste von Einzelschritten
animationSteuert die Animation
animationKurzregel für alle Eigenschaften – außer der animation-play-state–Eigenschaft – der Animation
animation-nameName der @keyframes-Animation
animation-durationDauer eines Animations-Zyklus in Millisekunden
animation-timing-functionVerteilung der Geschwindigkeit über die Dauer eines Animations-Zyklus. Vorgabe ist ease
animation-delayVerzögerung, mit der Animation startet. Vorgabe ist 0.
animation-iteration-countWie oft die Animation abgespielt wird. Vorgabe ist »1«.
animation-directionSpielt die Animation wahlweise vorwärts, rückwärts oder alternierend ab. Vorgabe ist »normal«.
animation-play-stateOb die Animation läuft oder pausiert. Vorgabe ist »running«.

Kurzschrift

Bis auf animation-play-state fasst die Kurzschrift animation alle Eigenschaften einer Animation zusammen. Wenn zwei Zeitangaben in der Kurzschrift stehen, wird die erste Zeit als Dauer der Animation und die zweite Zeitangabe als animation-delay aufgefasst.

animation: ball 4s 2 1s alternate-reverse;
animation-play-state:running;