Lebendige Gestaltung von Webseiten mit CSS-Animationen

Cascading Stylesheet (CSS)-Animationen bieten Ihnen Möglichkeiten, die über das einfache (bereits mit CSS-Übergängen durchführbare) Ändern von CSS-Eigenschaften im Laufe der Zeit hinausgehen. Sie ermöglichen auch das Entwerfen komplexer Animationen mithilfe von Keyframes und eine differenziertere Steuerung anhand von Skripts. CSS-Animationen unterstützen im Allgemeinen interessantere und lebendigere Webinhalte (werfen Sie z. B. einen Blick auf die Beta Fish-Demo in der IE-Testversion) und bieten im Vergleich zu herkömmlichen JavaScript-basierten Animationsmethoden eine bessere Renderingleistung.

@keyframe-Regel

Der wichtigste Unterschied zwischen CSS-Animationen und CSS-Übergängen ist die @keyframes-Regel. Mit dieser Regel können Sie die Werte angeben, die eine CSS-Eigenschaft an verschiedenen Punkten während der Animation aufweisen muss. Sehen wir uns dazu ein einfaches Beispiel an.


@keyframes fadeOut {
  from {	
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.TransformDemoDivFadeOut:hover {
  animation-duration: 2s;
  animation-name: fadeOut;
}

Hier sehen Sie einen Screenshot dieser Beispielseite. Sie können auch eine Liveversion des Beispiels anzeigen. Zeigen Sie einfach mit dem Cursor auf das Quadrat (oder tippen Sie mit dem Finger darauf): Das Quadrat wird langsam ausgeblendet.

Screenshot eines gelben Quadrats vor der Animation

Die @keyframes-Regel – gefolgt von einem von Ihnen ausgewählten Bezeichner – definiert eine Animation. Innerhalb der Regel können Sie mehrere Keyframes oder Punkte während der Animation definieren, an denen Sie feste Werte für bestimmte CSS-Eigenschaften angeben. Im obigen Beispiel wurden die Start- und Endpunkte einer Animation mit den from- und to-Schlüsselwörtern definiert. In den Keyframes können wir die gewünschten Werte für verschiedene Eigenschaften festlegen (in diesem Fall soll die Deckkraft des Elements bei 1 beginnen und sich mit der Animation in 0 ändern, sodass das Element ausgeblendet wird). Als Alternative zu den from- und to-Schlüsselwörtern können Sie beim Festlegen der Anfangs- und Endwerte der Animationen auch 0% und 100% verwenden. Wenn der Keyframe from (bzw. 0%) oder der Keyframe to (bzw. 100%) fehlt, werden stattdessen die normalen Stilwerte des Elements verwendet.

Nachdem Sie die @keyframes-Regel in der Formatvorlage definiert haben, lösen Sie die Animation aus, indem Sie die animation-name-Eigenschaft für das zu animierende Element festlegen. Da das Element in diesem Beispiel animiert werden soll, wenn darauf gezeigt wird, verwenden Sie die :hover-CSS-Pseudoklasse. Außerdem legen Sie mit der animation-duration-Eigenschaft die Dauer der Animation fest.

Im obigen Beispiel haben wir eine CSS-Animation verwendet, um den gleichen Effekt wie bei einem CSS-Übergang zu erzielen (und dazu etwas mehr Markup verwendet). Einer der wichtigsten Unterschiede zwischen CSS-Animationen und CSS-Übergängen ist die Möglichkeit, die gewünschten Werte für verschiedene CSS-Eigenschaften an unterschiedlichen Punkten während einer Animation zu definieren, wohingegen bei einem Übergang nur die Start- und Endwerte angegeben werden können.

Verwenden mehrerer Keyframes für komplexe Animationen

Betrachten Sie die folgende @keyframes-Regel:


@keyframes fadeOutInOut {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Hier sehen Sie einen Screenshot dieser Beispielseite. Sie können auch eine Liveversion des Beispiels anzeigen. Zeigen Sie einfach mit dem Cursor auf das Quadrat (oder tippen Sie mit dem Finger darauf): Das Quadrat wird ausgeblendet, wieder eingeblendet und dann erneut ausgeblendet.

Screenshot eines gelben Quadrats vor der Animation

Anders als CSS-Übergänge sind CSS-Animationen nicht auf eine Richtung beschränkt (vom Anfang zum Ende). Zudem müssen Sie nicht alle gewünschten Eigenschaften gleichzeitig animieren. Sehen wir uns dazu ein weiteres Beispiel an.


@keyframes fadeOutInOutSwirl {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 0.5;
    transform: rotateZ(0deg); 
  }
  75% {
    opacity: 0.5;
    transform: rotateZ(180deg);
  }
  100% {
    opacity: 1.0;
    transform: rotateZ(360deg);
  }
}

Hier sehen Sie einen Screenshot dieser Beispielseite. Sie können auch eine Liveversion des Beispiels anzeigen. Zeigen Sie einfach mit dem Cursor auf das Quadrat (oder tippen Sie mit dem Finger darauf): Das Quadrat wird halb ausgeblendet, entgegen dem Uhrzeigersinn gedreht, erneut entgegen dem Uhrzeigersinn gedreht und dann wieder eingeblendet.

Screenshot eines gelben Quadrats vor der Animation

Beachten Sie, dass das Markup für dieses Beispiel die Deckkraft für das erste Viertel der Animation (von 0 % bis 25 %) animiert und für den Rest der Animation sowohl die Deckkraft verändert als auch das Element dreht. Durch diese Flexibilität bieten CSS-Animationen die Möglichkeit, komplexe, flüssige und ressourceneffiziente Webinhalte zu erstellen.

CSS-Animationseigenschaften

Die CSS-Animationsspezifikation stellt eine Reihe von Eigenschaften bereit, die eine differenzierte Steuerung des animierten Inhalts ermöglichen.

EigenschaftBeschreibung

animation

Gibt einen Kompaktwert an, der alle Animationseigenschaften definiert (mit Ausnahme von "animation-play-state").

animation-delay

Gibt das Offset innerhalb eines Animationszyklus (die Dauer nach dem Start eines Zyklus) vor der Anzeige der Animation an. Die Werte für diese Eigenschaft werden in Sekunden angegeben (mit angefügtem "s" – z. B. animation-delay: 2s;)

animation-direction

Gibt die Wiedergaberichtung für einen Animationszyklus an. Wenn "animation-direction" auf "normal" festgelegt ist, wird die Animation wie erwartet ausgeführt (Eigenschaften werden mit ihren Werten von 0 % bis 100 % animiert). Mit der Einstellung "reverse" wird der umgekehrte Effekt erzielt. Die Werte "alternate" und "alternate-reverse" führen dazu, dass die Animation in einer Mehrfachiteration zwischen den Modi "normal" und "reverse" wechselt.

animation-duration

Gibt die Dauer für die Ausführung eines Animationszyklus an. Die Werte für diese Eigenschaft werden in Sekunden angegeben (mit angefügtem "s" – z. B. animation-duration: 2s;)

animation-fill-mode

Gibt an, ob die Effekte einer Animation vor oder nach ihrer Wiedergabe sichtbar sind. Diese Eigenschaft definiert die CSS-Eigenschaften, die am Ende einer Animation auf das Element angewendet werden. Bei Einstellung auf "none" (Anfangswert) wird ein animiertes Element nach Abschluss der Animation auf seine ursprünglichen Stileigenschaften zurückgesetzt. Wird diese Eigenschaft auf den Wert "forwards" festgelegt, werden nach Abschluss der Animation die Endwerte der Animation (die in den "to"- oder "100%"-Keyframes angegebenen Werte) angewendet.

animation-iteration-count

Gibt die Anzahl von Wiederholungen für den Animationszyklus an. Wenn diese Eigenschaft auf "infinite" festgelegt ist, wird die Animation ohne zeitliche Begrenzung ausgeführt.

animation-name

Gibt einen oder mehrere Animationsnamen an. Ein Animationsname gibt eine CSS- @keyframes-at-Regel an (bzw. wählt die Regel aus).

animation-play-state

Gibt an, ob eine Animation gerade wiedergegeben wird oder angehalten ist. Mit dieser Eigenschaft können Sie eine Animation anhalten, indem Sie ihren Wert auf "paused" festlegen, und fortsetzen, indem Sie den Wert auf "running" setzen. Eine abgeschlossene Animation kann nicht neu gestartet werden, indem ihre animation-play-state-Eigenschaft auf "running" zurückgesetzt wird. Um eine Animation neu zu starten, müssen Sie sie erneut dem Element hinzufügen.

animation-timing-function

Gibt die Zwischenwerte der Eigenschaft an, die während eines Zyklus einer Animation verwendet werden sollen.

 

Mit der letzten der oben beschriebenen Eigenschaften – animation-timing-function – kann eine Bézierkurve definiert werden, die festlegt, wie schnell sich die animierten Werte ändern. Bei einer Keyframeanimation wird diese Funktion zwischen Keyframes angewendet. Zudem kann animation-timing-function innerhalb einer Keyframedefinition verwendet werden und gilt daher nur für den Übergang von diesem Keyframe zum nächsten.

Internet Explorer 10 enthält mehrere integrierte Funktionsdefinitionen (z. B. ease, linear, ease-in, ease-out usw.) und eine cubic-bezier()-Funktion, mit der Sie eigene Zeitsteuerungsfunktionen angeben können.

Sehen wir uns einige Beispiele an, die diese Zeitsteuerungsfunktionen in Aktion zeigen. Diese Beispielseite enthält eine Zeile von Quadraten, für die die gleichen Animationen, aber unterschiedliche Zeitsteuerungsfunktionen verwendet wurden. Beachten Sie die leichten Geschwindigkeitsveränderungen bei jeder Animation.

Sie können auch die interaktive Demo zu CSS-Animationen anzeigen. Dort erfahren Sie, wie Zeitsteuerungsfunktionen direkt bearbeitet werden können.

JavaScript-Ereignisse

Im Modul "CSS-Animationen" sind drei JavaScript-Ereignisse definiert, die während der Lebensdauer einer Animation ausgelöst werden können.

EreignisBeschreibung

animationstart

Tritt zu Beginn der Animation auf, wobei Animationsverzögerungen (die in der animation-delay-Eigenschaft angegeben werden) ggf. berücksichtigt werden. Bei einer negativen Verzögerung wird das Ereignis mit einer Ablaufzeit ausgelöst, die dem absoluten Wert der Verzögerung entspricht.

animationend

Tritt auf, wenn die Animation beendet wird.

animationiteration

Tritt am Ende jeder Iteration einer Animation auf. Dieses Ereignis wird nur ausgelöst, wenn die animation-iteration-count-Eigenschaft auf einen Wert größer 1 festgelegt ist.

 

Auf Animationsereignisse kann wie auf andere JavaScript-Ereignisse gelauscht werden. Werfen Sie einen Blick auf das folgende Codebeispiel:


element.addEventListener(
  "animationstart",
  function () { window.alert("Animation started!") }
);

Dieses Beispiel löst ein Warnfeld aus, nachdem eine Animation für das Zielelement gestartet wurde. Die Kontextinformationen für das Ereignis enthalten den Animationsnamen (animationName) und optional eine elapsedTime-Variable, in der die seit dem Auslösen der Animation verstrichene Zeit gespeichert wird.

Sie können eine Liveversion des Beispiels anzeigen. Zeigen Sie einfach mit dem Cursor auf das Quadrat (oder tippen Sie mit dem Finger darauf): Das Quadrat wird halb ausgeblendet, entgegen dem Uhrzeigersinn gedreht, erneut entgegen dem Uhrzeigersinn gedreht und dann wieder eingeblendet.

Verwandte Themen

Weitere Informationen zu CSS-Animationen finden Sie in den folgenden Referenzquellen:

 

 

Anzeigen:
© 2014 Microsoft