CSS3 Übergänge
CSS3 Übergänge
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:
Übergang
Browser-Unterstützung
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- |
Wie funktioniert es?
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:
- Ich möchte die Wirkung von CSS-Eigenschaften hinzufügen
- Geben Sie die Dauer des Effekts.
Beispiele
Breite Attribut angewendet Übergangseffekt, die Dauer von 2 Sekunden:
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}
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:
Beispiele
Rückstellungen, wenn der Mauszeiger Suspension (: hover) mit dem <div> Element, wenn:
{
width: 300px;
}
Versuchen »
Hinweis: Wenn Sie den Mauszeiger auf das Element, das nach und nach seinen ursprünglichen Stil ändert
Anzahl der Änderungen
Um mehr als einen Effekt der Änderung Stil, fügen Sie durch Komma getrennt Attribute:
Beispiele
Hinzugefügt Breite, Höhe und Übergangseffekte:
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
Versuchen »
Übergangseigenschaften
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:
Beispiele
Verwenden Sie alle Übergangseigenschaften in einem Beispiel:
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
Versuchen »
Beispiele
Und Beispiele für die gleichen Übergangseffekte oben, jedoch verwendet die Kurzschreibweise Übergangseigenschaften:
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}
Versuchen »