Das beste CSS3 Übergänge-Tutorial im Jahr 2024. In diesem Tutorial können Sie CSS3 Übergänge,Browser-Unterstützung,Wie funktioniert es?,Beispiele,Beispiele,Anzahl der Änderungen,Beispiele,Übergangseigenschaften,Beispiele,Beispiele, lernen
CSS3, müssen wir einen Effekt hinzufügen, die von einem Stil zum anderen Zeit umgewandelt werden kann, ohne die Verwendung von Flash-Animation oder JavaScript. Maus über die folgenden Elemente:
Maus über die folgenden Elemente:
Die Zahlen in der Tabelle stellen die erste Browser die Versionsnummer der Immobilie zu unterstützen.
Unmittelbar im Anschluss an die digitale -webkit-, -MS- oder vor zur Unterstützung der Präfix Attributnummer erste Browser-Version -moz-.
属性 | |||||
---|---|---|---|---|---|
transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
CSS3 Übergang ist ein Element, nach und nach von einem Stil zum anderen Effekt ändern.
Um dies zu erreichen, müssen zwei Dinge definiert werden:
Breite Attribut angewendet Übergangseffekt, die Dauer von 2 Sekunden:
Hinweis: Wenn Sienicht über eine Frist fest, Wechsel keine Auswirkung haben wird, da der Standardwert 0 ist.
Der Effekt wird auf den Wert der angegebenen CSS-Eigenschaft ändert. Eine typische CSS-Eigenschaft Änderung ist der Benutzer die Maus über ein Element:
Rückstellungen, wenn der Mauszeiger Suspension (: hover) mit dem <div> Element, wenn:
Hinweis: Wenn Sie den Mauszeiger auf das Element, das nach und nach seinen ursprünglichen Stil ändert
Um mehr als einen Effekt der Änderung Stil, fügen Sie durch Komma getrennt Attribute:
Hinzugefügt Breite, Höhe und Übergangseffekte:
Die folgende Tabelle listet alle die Übergangseigenschaften:
Immobilien | Beschreibung | CSS |
---|---|---|
Übergang | Stenografie Eigenschaft für die Einstellung vier Übergangseigenschaften in einer Eigenschaft. | 3 |
Übergang-Eigenschaft | Der Name der CSS-Eigenschaft Übergangsbestimmungen gelten. | 3 |
Übergangsdauer | Um den Übergang Effekt verbrachte Zeit definieren. Der Standardwert ist 0. | 3 |
Übergang-Timing-Funktion | Vorgegebene Übergang Effekt-Zeit-Kurve. Die Standardeinstellung ist "erleichtern". | 3 |
Übergang-Verzögerung | Rückstellungen, wenn die Übergangseffekt zu starten. Der Standardwert ist 0. | 3 |
Die beiden folgenden Beispiele setzen alle Übergang Attribute:
Verwenden Sie alle Übergangseigenschaften in einem Beispiel:
Und Beispiele für die gleichen Übergangseffekte oben, jedoch verwendet die Kurzschreibweise Übergangseigenschaften: