(0) exportieren Drucken
Alle erweitern

Animationen

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen CSS-Animationen (Cascading Stylesheets). CSS-Animationen ermöglichen das Erstellen optisch ansprechender Anwendungen mit nahtlosen, flüssigen, animierten Erfahrungen.

CSS-Animationen sind vom World Wide Web Consortium (W3C) in der Spezifikation der CSS-Animationen definiert.

Animationen entsprechen den Übergängen insofern, dass sie Elemente animieren, indem sie Position, Größe, Farbe und Deckkraft ändern und indem sie sie drehen, skalieren, übersetzen usw. Und wie bei Übergängen können Sie die zeitliche Steuerung angeben, um die Progressionsrate einer Animation anzuzeigen.

Bei CSS3-Animationen (Cascading Style Sheets, Level 3) können Sie auch Keyframes verwenden, die die Werte für die Animationseigenschaften an verschiedenen Punkten während der Animation angeben. So können Sie das Verhalten einer Animation nicht nur am Anfang und am Ende der Animation, sondern auch währenddessen definieren. Animationen können auch Iterationen und Funktionen zum Umkehren der Richtung enthalten und die Fähigkeit zum Anhalten und Fortsetzen erhalten.

Wie Sie vielleicht erwarten, bieten CSS3-Animationen unendliche Möglichkeiten zum Erstellen von umfassenden, ansprechenden Erfahrungen. Dieses Thema bietet eine kurze Übersicht über das Erstellen einer CSS-Animation in Internet Explorer 10 und Windows Store-Apps mit JavaScript sowie ein Beispiel der verwendeten CSS3-Animationen.

Die in diesem Thema beschriebenen Eigenschaften, die at-Regel und die Ereignisse benötigten früher das Microsoft-spezifische Herstellerpräfix "-ms-", damit sie in Internet Explorer 10 und Windows Store-Apps mit JavaScript funktionierten. Dieses Präfix ist nicht mehr erforderlich, es wird aber noch erkannt. Um die Kompatibilität auch in Zukunft zu gewährleisten, sollten Apps, bei denen die Animationseigenschaften mit einem Microsoft-spezifischen Präfix verwendet werden, aktualisiert werden.

Eine Liste mit CSS-Eigenschaften, auf die Sie Animationen anwenden können, finden Sie unter Animations- und Übergangseigenschaften.

Erstellen einer Animation

Für das Erstellen einer Animation verwenden Sie drei grundlegende Schritte:

1. Geben Sie die Animationseigenschaften an.
2. Erstellen Sie die Keyframes.
3. Wenden Sie die Animation auf eines oder mehrere Elemente an.

Angeben der Animationseigenschaften

Geben Sie zunächst die Animationseigenschaften in einem Selektor an, den Sie auf die zu animierenden Elemente anwenden. In diesem Abschnitt werden die Animationseigenschaften beschrieben.

Die animation-name-Eigenschaft

Die animation-name-Eigenschaft gibt Animationsbezeichner an (im Prinzip der "Name" der jeweiligen Animation). Der Animationsbezeichner wählt die CSS-at-Regel @keyframes aus. Die Syntax sehen Sie hier:

EigenschaftBeschreibung

animation-name

Gibt einen oder mehrere Animationsbezeichner an. Sie identifizieren Animationen über die CSS-at-Regel @keyframes.

 

Die animation-duration-Eigenschaft

Die animation-duration-Eigenschaft gibt die Dauer für einen Durchlauf der Animation an. Die Syntax sehen Sie hier:

EigenschaftBeschreibung

animation-duration

Gibt einen oder mehrere durch Kommas getrennte Zeitwerte an, die jeweils die Dauer für einen Animationszyklus angeben. Jeder Wert liegt als Gleitkommazahl vor auf die ein Zeiteinheitsbezeichner (ms oder s) folgt. Diese Eigenschaft akzeptiert auch negative Werte.

 

Die animation-timing-function-Eigenschaft

Die animation-timing-function-Eigenschaft erlaubt die Änderung der Geschwindigkeit einer Animation über deren Dauer. Dazu wird beschrieben, wie die dazwischen liegenden Eigenschaftenwerte während eines Durchlaufs der Animation berechnet werden. Zu diesem Zweck geben Sie eine Funktion für die zeitliche Steuerung der Animation an, die auf einer kubischen Bézierkurve basiert und vier Parameter akzeptiert. Sie können eine Zeitgeberfunktion für die gesamte Animation oder für einzelne Keyframes angeben.

Es ist möglich, die Kurve explizit mithilfe der cubic-bezier-Funktion anzugeben oder durch die manuelle Eingabe der vier Werte. Sie können aber auch eines der verschiedenen Funktionsschlüsselwörter auswählen, die jeweils einer häufiger verwendeten Zeitgeberfunktion entsprechen. Die Syntax der Eigenschaft ist hier dargestellt:

EigenschaftBeschreibung

animation-timing-function

Gibt eine oder mehrere durch Kommas voneinander getrennte Zeitgeberfunktionen an, die Zwischenwerte der Eigenschaft definieren, die während eines Zyklus der Animation verwendet werden. Die Animation wird als Satz zugehöriger Objekteigenschaften berechnet, die in der CSS-at-Regel @keyframes angegeben werden, die in der animation-name-Eigenschaft festgelegt wurde. Die möglichen Werte sind im Folgenden aufgeführt. Beschreibungen der einzelnen Funktionen finden Sie auf der Referenzseite zu animation-timing-function.

cubic-bezier(x1,y1,x2,y2)

Die vier Parameter dieser Funktion müssen Gleitkommawerte zwischen 0 und 1 (einschließlich) sein. Die Werte entsprechen den x- und y-Koordinaten der Punkte P1 und P2 der kubischen Bézierkurve. Für andere Eigenschaften als opacity und color akzeptiert die cubic-bezier-Kurvenfunktion y-Koordinaten außerhalb des Standardbereichs zwischen 0 und 1. Dadurch können Sie "elastische" oder "bewegliche" Übergangseffekte erzeugen.

ease

Dies ist der Anfangswert. Bei dieser Funktion für die zeitliche Steuerung wird die Geschwindigkeit der Animation am Anfang nach und nach erhöht, bis die volle Geschwindigkeit erreicht ist, und am Ende nach und nach wieder verringert.

linear

Bei dieser Zeitgeberfunktion ist die Geschwindigkeit von Anfang bis Ende gleich.

ease-in

Diese Zeitgeberfunktion erhöht die Geschwindigkeit zu Beginn schrittweise.

ease-out

Diese Zeitgeberfunktion erhöht die Geschwindigkeit zum Ende hin schrittweise.

ease-in-out

Diese Zeitgeberfunktion erhöht die Geschwindigkeit zu Beginn schrittweise und verringert sie zum Ende hin wieder.

steps

Diese Zeitgeberfunktion verwendet zwei Parameter, um eine schrittweise Zeitgeberfunktion zu definieren. Der erste Parameter gibt die Anzahl von Intervallen an. Der optionale zweite Parameter gibt den Zeitpunkt im Zeitintervall an, zu dem sich der Eigenschaftenwert ändert. Für den zweiten Parameter sind nur die Werte start und end (der Standardwert) möglich.

 

Die animation-iteration-count-Eigenschaft

Die animation-iteration-count-Eigenschaft definiert die Anzahl der Wiederholungen für den Animationszyklus. Die Syntax der Eigenschaft ist hier dargestellt:

EigenschaftBeschreibung

animation-iteration-count

Definiert die Anzahl der Wiederholungen für den Animationszyklus. Mehrere Werte werden durch Kommas voneinander getrennt.

<number>

Die Anzahl von Wiederholungen für den Animationszyklus. Sie können eine nicht ganzzahlige Anzahl angeben – die Animation endet dann während eines Zyklus. Der Anfangswert ist "1".

infinite

Die Animation wird unendlich oft wiederholt.

Wenn Sie einen negativen Wert oder "0" angeben, wird keine Animation angewendet.

Sie können die animation-iteration-count-Eigenschaft verwenden, wenn die animation-direction-Eigenschaft auf alternate festgelegt ist, wodurch die Animation abwechselnd in umgekehrter Reihenfolge abgespielt wird.

 

Die animation-direction-Eigenschaft

Die animation-direction-Eigenschaft gibt die Wiedergaberichtung für einen Animationszyklus an. Die Syntax der Eigenschaft ist hier dargestellt:

EigenschaftBeschreibung

animation-direction

Legt fest, ob die Animation in umgekehrten oder wechselnden Zyklen wiedergegeben werden soll. Diese Eigenschaft kann auf einen der beiden folgenden kommagetrennten Werte festgelegt werden:

normal

Dies ist der Anfangswert. Er gibt an, dass die Animation nicht in umgekehrten oder wechselnden Zyklen wiedergegeben wird.

reverse

Dieser Wert gibt an, dass die Animationszyklen in umgekehrter Reihenfolge als angegeben wiedergegeben werden.

alternate

Dieser Wert gibt an, dass die Animationszyklen bei Wiederholungen zwischen vorwärts (ungerade Wiederholungen) und rückwärts (gerade Wiederholungen) wechseln.

alternate-reverse

Dieser Wert gibt an, dass die Animationszyklen bei Wiederholungen zwischen rückwärts (ungerade Wiederholungen) und vorwärts (gerade Wiederholungen) wechseln.

 

Die animation-play-state-Eigenschaft

Die animation-play-state-Eigenschaft gibt an, ob eine Animation gerade wiedergegeben wird oder unterbrochen ist. Diese Eigenschaft kann hilfreich sein, wenn Sie ein Verfahren entwickeln, mit dem Benutzer eine Animation unterbrechen können. Die Syntax der Eigenschaft ist hier dargestellt:

EigenschaftBeschreibung

animation-play-state

Legt fest, ob die Animation ausgeführt wird oder unterbrochen ist. Diese Eigenschaft kann auf einen der beiden folgenden kommagetrennten Werte festgelegt werden:

paused

Unterbricht eine ausgeführte Animation. Die Animation zeigt weiter statisch den aktuellen Wert der Animation an (wie bei einem konstanten Zeitwert der Animation).

running

Fährt mit der Wiedergabe einer unterbrochenen Animation fort. Die Animation wird ab dem aktuellen Wert fortgesetzt.

 

Die animation-delay-Eigenschaft

Die animation-delay-Eigenschaft legt fest, wann eine Animation gestartet wird. Sie erlaubt auch den Start nach einer gewissen Zeit nach der Anwendung. Die Syntax sehen Sie hier:

EigenschaftBeschreibung

animation-delay

Gibt einen oder mehrere durch Kommas voneinander getrennte Offsetwerte innerhalb einer Animation an (die Dauer ab dem Start einer Animation), bevor die Animation für einen Satz zugehöriger Objekteigenschaften sichtbar ist. Jeder Wert liegt als Gleitkommazahl vor auf die ein Zeiteinheitsbezeichner (ms oder s) folgt.

  • Der Anfangswert "0" gibt an, dass die Animation direkt nach dem Anwenden ausgeführt wird.
  • Ein negativer Wert gibt an, dass die Animation direkt nach der Anwendung ausgeführt wird, es erscheint jedoch so, als hätte die Ausführung nach dem angegebenen Offset oder während des Wiedergabezyklus begonnen.

 

Die animation-fill-mode-Eigenschaft

Die animation-fill-mode-Eigenschaft legt fest, ob die Effekte einer Animation vor oder nach deren Wiedergabe sichtbar sind. Standardmäßig hat eine Animation zwischen dem Zeitpunkt ihrer Anwendung und dem ihrer Ausführung (und einer Verzögerung durch die animation-delay-Eigenschaft) keinen Einfluss auf Eigenschaftenwerte. Außerdem beeinflusst eine Animation nach ihrer Beendigung (nach Ablauf der durch die animation-duration-Eigenschaft definierten Zeit) keine Eigenschaftenwerte mehr. Mit der animation-fill-mode-Eigenschaft können Sie dieses Standardverhalten außer Kraft setzen. Die Syntax sehen Sie hier:

EigenschaftBeschreibung

animation-fill-mode

Gibt einen oder mehrere durch Kommas voneinander getrennte Werte an, die das Verhalten der Animation außerhalb der Zeitdauer ihrer Ausführung festlegen. Folgende Werte können festgelegt werden:

none

Das Standardverhalten bleibt unverändert.

forwards

Der letzte Eigenschaftenwert wird (wie im letzten Keyframe definiert) nach Abschluss der Animationsausführung beibehalten.

backwards

Der anfängliche Eigenschaftenwert (der im ersten Keyframe definiert ist) wird vor dem Anzeigen der Animation während der durch animation-delay definierten Zeit angewendet.

both

Es werden beide Füllmodi ("forwards" und "backwards") angewendet.

 

Die animation-Eigenschaft

Die animation-Kompakteigenschaft kombiniert sechs Animationseigenschaften in einer einzelnen Eigenschaft. Die Syntax sehen Sie hier:

EigenschaftBeschreibung

animation

Gibt einen oder mehrere Sätze von durch Leerzeichen voneinander getrennte Animationseigenschaften für einen Satz zugehöriger Objekteigenschaften an. Die Werte der animation-Eigenschaft müssen in der folgenden Reihenfolge festgelegt werden:

Wenn Sie mehrere Sätze mit sechs Werten für die animation-Eigenschaft angeben möchten, trennen Sie die einzelnen Sätze durch ein Leerzeichen voneinander ab.

 

Das folgende Codebeispiel definiert mehrere Animationseigenschaften in einem div-Element:


div {
  animation-name: myAnimation;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: -1s;
  animation-iteration-count: 2;
  animation-direction: normal;
}


Mit der animation-Kompakteigenschaft können Sie alle sechs Eigenschaften auf einer Zeile angeben, wie im Folgenden dargestellt:


div {
  animation: myAnimation 3s ease-out -1s 2 normal;
}


Erstellen der Keyframes

Geben Sie anschließend die Keyframes für Ihre Animation an. Mit Keyframes können Sie Zwischenwerte in einer Animation genauer steuern. Die @keyframes-Regel gibt eine Liste von Eigenschaftenanimationskeyframes für ein Objekt und einen Bezeichner für die Animation an. Die Syntax sehen Sie hier:

RegelBeschreibung

@keyframes

Eine Liste der Eigenschaftenanimationskeyframes für ein Objekt im HTML-Dokument. Mit dieser Regel werden Eigenschaftenwerte zu verschiedenen Zeitpunkten einer Animation angegeben sowie ein Bezeichner für die Animation. Die gibt die Eigenschaftenwerte während eines Zyklus der Animation an. (Die Animation kann einmal oder mehrmals durchlaufen werden.)

Diese Regel verwendet Keyframe-Selektoren, um während der unterschiedlichen Phasen der Animation Eigenschaftenwerte anzugeben. Keyframe-Selektoren können als from (entspricht 0 %), to (entspricht 100 %) und als ein oder mehr Prozentsätze deklariert werden.

 

Das folgende Beispiel veranschaulicht drei Keyframe-Selektoren mit jeweils zwei Keyframe-Deskriptoren.


@keyframes myAnimation {
  from {     
    left: 100px;
    right: 50px;  
  } 
  40% {      
    left: 50px;
    right: 10px; 
  }
  to {         
    left: 10px;
    right: 10px;
  }
}

In diesem Beispiel werden Keyframes für drei Positionen während der Animation angegeben: den Anfang (der from-Wert oder 0 %), 40 % und das Ende (der to-Wert oder 100 %).

Sie können auch die Zeitgeberfunktion angeben, die beim Wechsel der Animation zum nächsten Keyframe verwendet werden soll. Fügen Sie einfach die animation-timing-function-Eigenschaft in die entsprechende Keyframe-Auswahl ein.

Anwenden der Animation

Wenden Sie zum Schluss den Animationsstil auf ein Element an. Dies wird i. d. R. durch ein Ereignis ausgelöst, z. B. durch das Klicken (oder Tippen) auf eine Schaltfläche. Beachten Sie, dass CSS-Animationen nicht wie Übergänge durch Ändern der Eigenschaftenwerte unterbrochen werden können. Eine CSS-Animation kann nur mit der animation-play-state-Eigenschaft oder durch Hinzufügen oder Entfernen des Animationsnamens unterbrochen werden.

Nach Abschluss der Animation werden die animierten Eigenschaften wieder auf die ursprünglichen Werte zurückgesetzt.

Beispiel

Das folgende Beispiel zeigt eine CSS-Animation. Sie wurde mit der Demo So geht´s: Animationen aus der IE-Testversion erstellt.

Zu Beginn erstellen wir ein div-Element mit etwas Text und wenden darauf einige Stile an:


<!DOCTYPE html>
<html lang="en-us">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI";
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
}
</style>
</head>
<body>
<div>
Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim,
vitae euismod odio. Suspendisse eu.
</div>
</body>
</html>


Den ganzen Code sehen Sie auf dieser Seite.

Anschließend definieren wir einige Parameter für die Animation. Wir fügen im Abschnitt style einen Selektor hinzu, der die Pseudoklasse :active verwendet. Das bedeutet, dass die Animation so lange angezeigt wird, wie der Benutzer den Textblock gedrückt hält (per Maus oder mit dem Finger). Die Animation wird bis zum Ende fortgesetzt.

Damit die Animation auch direkt gestartet wird, 5 Sekunden dauert, einmal wiederholt wird (insgesamt 2 Durchläufe) und mit dem Namen "demo" bezeichnet wird, fügen wir folgenden Selektor hinzu:


...
div:active {
  animation-delay: 0s;
  animation-duration: 5s;
  animation-iteration-count: 2;
  animation-name: demo;
}
...

Nun erstellen wir drei Keyframes — einen für den Anfang der Animation, einen für die Mitte und einen für das Ende. In jedem Keyframe definieren wir beide Eigenschaften zum Ändern und Takten der Funktionen, mit denen der Grad der Änderungen definiert wird.


@keyframes demo {
  from {
    animation-timing-function: ease;
  }
  50% {
    background-color: purple;
    animation-timing-function: ease-in;
    transform: translate(20px,30px);
  }
  to {
    background-color: blue;
  }
}

Wir haben zwei Eigenschaften für die Animation definiert, background-color und transform. Im Lauf eines einzelnen Animationszyklus ändert sich die Hintergrundfarbe des div-Elements von Hellgrün (der ursprünglichen Farbe) zu Violett und dann zu Blau. Das div-Element bewegt sich auch um 20 Pixel nach rechts und um 30 Pixel nach unten und dann zurück. Die Animation verwendet die zeitliche ease-Steuerung, um vom Anfang bis zur Hälfte (dem Keyframe bei 50%) zu animieren, und dann die zeitliche ease-in-Steuerung, um von der Hälfte bis zum Ende zu animieren. Die Animation wiederholt sich einmal.

Diese Animation anzeigen (Internet Explorer 10 erforderlich).

Animations-DOM-Ereignisse

Internet Explorer 10 und Windows Store-Apps mit JavaScript definieren drei Animations-DOM-Ereignisse (Dokumentobjektmodell):

animationstart

Das animationstart-Ereignis tritt zu Beginn der Animation ein, 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

Das animationend-Ereignis tritt ein, wenn die Animation beendet wird.

animationiteration

Das animationiteration-Ereignis tritt am Ende jedes Durchlaufs der Animation ein. Dieses Ereignis wird nur dann ausgelöst, wenn die animation-iteration-count-Eigenschaft größer als eins ist.

  • Weiterleitung: Ja
  • Abbrechen möglich: Ja

Dieses Beispiel animiert ein <div>-Element und löst die Ereignisse animationend, animationend und animationiteration aus, um den Text im Feld zu ändern. Beispiel online ausprobieren


<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>CSS Animation Events Example</title>
<style>
  body {
    padding:10px;
    font-family:"Segoe UI";
  }
  div {
    width:250px; 
    background-color:lime;
    padding:10px;
    font-weight:bold;
    font-size:20pt;
  }
  div:active {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-iteration-count: 2;
    animation-name: demo;
  }
  @keyframes demo {
    from {
    animation-timing-function: ease;
    }
    50% {
      background-color: purple;
      animation-timing-function: ease-in;
      transform: translate(20px,30px);
    }
    to {
      background-color: blue;
    }
  }
</style>
</head>
<body>
  <h1>CSS Animation Events Example</h1>
    <p>Click and hold to start the animation. Internet Explorer 10 or later required.</p>
    <div id="mydiv">
      Duis ac leo sit amet lectus tristique pulvinar nec rutrum dolor. Etiam sed ipsum enim, vitae euismod odio. Suspendisse eu.
    </div>

    <script>
      var divObj = document.getElementById("mydiv");
      divObj.addEventListener("animationstart", function (
      ) {
       this.innerHTML = "This is the animation start event";
      }, false);

      divObj.addEventListener("animationend", function () {
        this.innerHTML = "This is the animation end event";
      }, false);

      divObj.addEventListener("animationiteration", function () {
        this.innerHTML = "This is the animation iteration event";
      }, false);

    </script>


</body>
</html>


API-Referenz

Animations

Beispiele und Lernprogramme

So wird's gemacht: Lebendiges Gestalten von Webseiten mit CSS-Transformationen, -Übergängen und -Animationen

Demos für die Internet Explorer-Testversion

So geht´s: Animationen
Lebendiges Gestalten von Seiten mit CSS-Transformationen und -Animationen
Beta Fish IE

IEBlog-Beiträge

Mehr Persönlichkeit durch CSS3-Übergänge und -Animationen
Ganzseitige Animationen mit CSS
CSS3-3D-Transformationen in IE10

Spezifikation

CSS-Animationen

Verwandte Themen

Erstellen großartiger Apps mit CSS3-Animationen
CSS3-Animation mit jQuery-Fallbacks

 

 

Anzeigen:
© 2014 Microsoft