War diese Seite hilfreich?
Ihr Feedback ist uns wichtig. Teilen Sie uns Ihre Meinung mit.
Weiteres Feedback?
1500 verbleibende Zeichen
Steuern des Audio-Objekts mithilfe von JavaScript6

Übergänge

Internet Explorer 10 und Windows Store-Apps mit JavaScript unterstützen CSS3-Übergänge (Cascading Stylesheets, Level 3). Übergänge ermöglichen das Erstellen einfacher Animationen durch nahtloses Ändern der CSS-Eigenschaftswerte (Cascading Stylesheets) über einen bestimmten Zeitraum. Sie können beispielsweise die Größe und Farbe eines Objekts über einen Zeitraum von 10 Sekunden variieren. Was Sie möglicherweise bisher über eine komplizierte Kombination aus CSS und JavaScript erledigt haben, können Sie jetzt nur mit CSS erledigen. CSS3-Übergänge sind vom World Wide Web Consortium (W3C) in den Spezifikationen für das Modul CSS-Übergänge, Ebene 3 definiert, die sich derzeit in der Arbeitsentwurfsphase befinden.

Hinweis  Die in diesem Thema beschriebenen Eigenschaften und 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 Übergangseigenschaften mit einem Microsoft-spezifischen Präfix verwendet werden, aktualisiert werden.

Dieses Thema bietet eine Übersicht über die Eigenschaften für CSS3-Übergänge und ein einfaches praktisches Beispiel für Übergänge.

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

Die transition-property-Eigenschaft

Sie können mit der transition-property-Eigenschaft eine oder mehrere CSS-Eigenschaften bestimmen, auf die bei einem neuen Eigenschaftenwert Übergangseffekte angewendet werden.

EigenschaftBeschreibung

transition-property

Gibt den bzw. die Namen der CSS-Eigenschaft(en) an, auf die der Übergangseffekt angewendet wird, wenn ein neuer Eigenschaftswert angegeben wird. Die transition-property-Eigenschaft kann auf eine kommagetrennte Liste von CSS-Eigenschaften oder auf einen der folgenden Werte festgelegt werden:

  • none  Bei Angabe eines neuen Eigenschaftswerts wird kein Übergangseffekt angewendet. Alle Übergangseigenschaften werden ignoriert.
  • all  Dies ist der Standardwert. Auf jede Eigenschaft, die Übergänge unterstützt, wird der Übergangseffekt angewendet, sobald ein neue Wert für die Eigenschaft angegeben wird.

 

Sie können Übergänge nicht nur auf die grundlegenden CSS-Eigenschaften wie Positionierung, Farbe, Schriftarten usw., sondern auch auf neu unterstützte CSS-Eigenschaften wie opacity und border-radius sowie auf 2-D- und 3-D-Transformen anwenden.

Wenn Sie einen Übergang unterbrechen, wird dieser automatisch umgekehrt.

Die transition-duration-Eigenschaft

Die transition-duration-Eigenschaft definiert die Dauer eines Übergangs.

EigenschaftBeschreibung

transition-duration

Gibt einen oder mehrere durch Kommata getrennte Zeitwerte an, die angeben, wie lange ein Übergang vom alten zum neuen Wert dauert. Jeder Wert wird in Form einer Gleitkommazahl, gefolgt von einem Kennzeichner für die Zeiteinheit (ms oder s), angegeben.

 

Die transition-timing-function-Eigenschaft

Die transition-timing-function-Eigenschaft erlaubt die Änderung der Geschwindigkeit eines Übergangs über dessen Dauer. Dazu wird beschrieben, wie die dazwischen liegenden Werte während des Übergangs 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 entweder die Kurve explizit mit der cubic-bezier-Funktion und manueller Eingabe der vier Werte angeben oder eine Auswahl aus mehreren Funktionsschlüsselwörtern treffen, von denen jedes einer gängigen Funktion für die zeitliche Steuerung entspricht.

EigenschaftBeschreibung

transition-timing-function

Gibt eine oder mehrere durch Kommata getrennte Funktionen für die zeitliche Steuerung an, mit denen die den Zwischenzuständen entsprechenden Eigenschaftswerte definiert werden, die während eines Übergangs für einen Satz entsprechender Objekteigenschaften verwendet werden. Die möglichen Werte sind im Folgenden aufgeführt. Beschreibungen der einzelnen Funktionen finden Sie auf der Referenzseite zu transition-timing-function.

  • cubic-bezier(x₁,y₁,x₂,y)  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 P₁ und P₂ 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. Auf diese Weise können Sie "elastische" oder "federnde" Übergangseffekte erstellen.
  • ease  Dies ist der Standardwert. 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 Funktion für die zeitliche Steuerung bleibt die Geschwindigkeit von Anfang bis Ende konstant.
  • ease-in  Bei dieser Funktion für die zeitliche Steuerung wird die Geschwindigkeit am Anfang nach und nach erhöht.
  • ease-out  Bei dieser Funktion für die zeitliche Steuerung wird die Geschwindigkeit zum Ende nach und nach verringert.
  • ease-in-out  Bei dieser Funktion für die zeitliche Steuerung wird die Geschwindigkeit der Animation am Anfang nach und nach erhöht und am Ende nach und nach wieder verringert.
  • steps  Bei dieser Funktion für die zeitliche Steuerung wird die Animation schrittweise ausgeführt. Es werden zwei Parameter akzeptiert. Der erste Parameter gibt die Anzahl der Intervalle an, der optionale zweite Parameter den Punkt im jeweiligen Intervall, an dem der Eigenschaftswert geändert wird. Für den zweiten Parameter sind nur die Werte "start" und "end" (dieser ist der Standardwert) möglich.

 

Die transition-delay-Eigenschaft

Mit der transition-delay-Eigenschaft können Sie den Start eines Übergangs verzögern oder diesen so erscheinen lassen, als wäre er bereits im Gange. Wenn für die transition-delay-Eigenschaft ein negativer Wert angegeben ist, wird der Übergang ausgeführt, sobald er angewendet wird, jedoch erscheint es so, als habe die Ausführung mit dem angegebenen Offset bzw. während des Anzeigezyklus begonnen.

EigenschaftBeschreibung

transition-delay

Gibt einen oder mehrere durch Kommata getrennte Offsetwerte innerhalb eines Übergangs an, die der Zeit vom Anfang eines Übergangs entsprechen, die verstreicht, bevor der Übergang für einen Satz entsprechender Objekteigenschaften angezeigt wird. Jeder Wert wird in Form einer Gleitkommazahl, gefolgt von einem Kennzeichner für die Zeiteinheit (ms oder s), angegeben.

 

Die transition-Eigenschaft

Die Kompakteigenschaft transition fasst die vier oben beschriebenen Übergangseigenschaften in einer Eigenschaft zusammen.

EigenschaftBeschreibung

transition

Gibt einen oder mehrere Sätze von durch Leerzeichen getrennten Übergangseigenschaften für einen Satz entsprechender Objekteigenschaften an. Die Werte der Übergangseigenschaften müssen in der folgenden Reihenfolge festgelegt werden:

Wenn mehrere Sätze mit diesen vier Werten für Übergangseigenschaften vorhanden sind, müssen Sie diese Sätze jeweils durch ein Komma trennen.

 

Beispiel

Sie sehen CSS3-Übergänge in Aktion unter So geht's: Übergänge in der IE-Testversion.

Das folgende einfache Beispiel zeigt, wie Sie mit CSS3-Übergängen eine CSS-Eigenschaft, die auf ein div-Element angewendet wird, nach und nach verändern können.

Zunächst erstellen wir ein div-Element, das Text enthält, und wenden einige Stile darauf an:


<!DOCTYPE html>
<html lang="en-us">

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


Diese Seite anzeigen.

Nun lassen wir das div-Element langsam verschwinden, indem wir die opacity-Eigenschaft ändern, wenn der Benutzer auf das div-Element klickt und die Maustaste gedrückt hält (oder es berührt und hält). Zuerst legen wir den "Vorher"- und "Nachher"-Wert für die "opacity"-Wert fest. Zu Anfang legen wir für das div-Element einen "opacity"-Wert von "1" fest, dann einen Wert von "0", wenn das div-Element "active" ist. Um dies zu bewerkstelligen, fügen wir "opacity"-Werte hinzu, sodass der "style"-Abschnitt folgendermaßen aussieht:


...
<style type="text/css">
body {
  padding:10px;
  font:bold 20pt "Segoe UI"; 
}
div {
  width:250px; 
  background-color:lime;
  padding:10px;
  opacity:1;
}
div:active {
  opacity:0;
}
</style>
...


Wenn Sie nun auf das grüne div-Element klicken und die Maustaste gedrückt halten (bzw. es mit dem Finger gedrückt halten), wird es sofort so lange ausgeblendet, wie Sie die Maustaste gedrückt halten (bzw. Ihren Finger auf dem Element halten). Diese Seite anzeigen.

Nun können wir CSS-Übergangseigenschaften hinzufügen, damit die Deckkraft nach und nach reduziert wird. Zunächst ermitteln wir die Eigenschaft für den Übergang mithilfe der transition-property-Eigenschaft:


transition-property: opacity;

Danach fügen wir mit der transition-duration-Eigenschaft eine Dauer für den Übergang hinzu:


transition-duration: 5s;

Nun definieren wir die zu verwendende timing-Funktion mit der transition-timing-function-Eigenschaft. Für einen gleichmäßigen Übergang des div-Elements verwenden wir die linear-Funktion für die zeitliche Steuerung:


transition-timing-function: linear;

Wir können den Übergang auch mit der transition-delay-Eigenschaft um eine Sekunde verzögern:


transition-delay: 1s;

Diese vier Eigenschaften bewirken für die opacity-Eigenschaft einen gleichmäßigen Übergang, der 5 Sekunden dauert und nach 1 Sekunde einsetzt. Sie können auch die Kompakteigenschaft für den Übergang verwenden, um die vier Eigenschaften miteinander zu kombinieren:


transition: opacity 5s linear 1s;

Diese Seite anzeigen.

Wenn Sie einen Übergang für mehr als eine Eigenschaft eines Elements erzeugen möchten, legen Sie die Übergangseigenschaften auf mehrere Werte fest, die Sie jeweils durch ein Komma trennen. Wir können z. B. unserem Beispiel von oben eine Farbänderung hinzufügen. Zunächst fügen wir der div :active-Auswahl eine background-color-Eigenschaft hinzu. Anschließend ändern wir die transition-Eigenschaft wie folgt:


transition: opacity 5s linear 1s, background-color 2s ease;

Diese Eigenschaft fügt einen Farbübergang zu Violett hinzu, der zwei Sekunden dauert und bei dem die "ease"-Funktion für die zeitliche Steuerung verwendet wird. Es gibt keinen Wert für eine Verzögerung, sodass der Übergang sofort beginnt. Diese Seite anzeigen.

DOM-Ereignisse für Übergänge

Internet Explorer 10 und Windows Store-Apps mit JavaScript definieren zwei Übergangsereignisse:

transitionstart

Das transitionstart-Ereignis tritt zu Beginn des Übergangs ein.

transitionend

Das transitionend-Ereignis tritt nach Abschluss des Übergangs ein. Wenn der Übergang entfernt wird, bevor er abgeschlossen ist, wird das Ereignis nicht ausgelöst.

Dieses Beispiel wendet Übergänge auf ein <div>-Element an und löst die Ereignisse transitionstart und transitionend aus, um den Text im Feld zu ändern. Beispiel online ausprobieren


<!DOCTYPE html>
<html>

<head>
<title>CSS Transitions Event Example</title>
<style media="screen" type="text/css">
#animatedDiv {
    opacity: 0.5;
    background-color: #D2D2D2;
    color: black;
  width:100px;
  height:100px;
}
#animatedDiv:hover {
    opacity: 1;
    background-color: #F472D0;
    transform: rotate(45deg) translateX(200px);
    transition: all 5s linear 1s;
}
  #Figure {
  border: solid 1px black;
  }
</style>
</head>

<body>

<h1 id="DemoTitle">CSS transition events example</h1>
  <p>Hover your mouse over the inner box</p>
<div class="FigureContainer Bordered">
    <div id="Figure" style="width: 330px; height: 300px;">
        <div id="animatedDiv" aria-haspopup="true">
            Transitioned Element</div>
    </div>
</div>

    <script>
      var divObj = document.getElementById("animatedDiv");
      divObj.addEventListener("transitionstart", function () {
        this.innerHTML = "This is a transition start event";
      }, false);
      divObj.addEventListener("transitionend", function () {
        this.innerHTML = "This is a transition end event";
      }, false);

    </script>

</body>

</html>


API-Referenz

Transitions

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: Übergänge
CSS3-3D-Transformationen in IE10
Lebendiges Gestalten von Seiten mit CSS-Transformationen und -Animationen

IEBlog-Beiträge

Ganzseitige Animationen mit CSS
Mehr Persönlichkeit durch CSS3-Übergänge und -Animationen

Spezifikation

CSS-Übergänge

Verwandte Themen

Ansprechende Apps mit CSS3-Übergängen

 

 

Anzeigen:
© 2015 Microsoft