CSS3 Transitions
CSS3 Übergänge können Sie Eigenschaftswerte glatt zu ändern (von einem Wert zu einem anderen), über einen bestimmten Dauer.
Beispiel: Maus über das Element unterhalb eines CSS3 Übergangseffekt zu sehen:
Browser-Unterstützung für Transitions
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit-, -moz- oder -o- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| 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 CSS3 Transitions zu verwenden?
Um einen Übergangseffekt zu erstellen, müssen Sie Folgendes angeben:
- die CSS-Eigenschaft wollen Sie einen Effekt hinzufügen
- die Dauer der Wirkung
Hinweis: Wenn die Dauer Teil nicht angegeben ist, wird der Übergang keine Auswirkungen haben, da der Standardwert 0 ist.
Das folgende Beispiel zeigt eine 100px * 100px rot <div> Element. Das <div> Element angegeben hat auch einen Übergangseffekt für die Breite Eigenschaft, mit einer Dauer von 2 Sekunden:
Beispiel
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Der Übergangseffekt wird gestartet, wenn die angegebene CSS-Eigenschaft (Breite) Wert ändert.
Lassen Sie uns nun einen neuen Wert für die Breite Eigenschaft angeben , wenn ein Benutzer mit der Maus über das <div> Element:
Beachten Sie, dass, wenn der Cursor mouses aus dem Element, wird es nach und nach wieder in seinen ursprünglichen Stil zu ändern.
Ändern Sie mehrere Eigenschaftswerte
Das folgende Beispiel fügt einen Übergangseffekt sowohl für die Breite und Höhe Eigenschaft, mit einer Dauer von 2 Sekunden für die Breite und 4 Sekunden, bis die Höhe:
Beispiel
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Versuch es selber " Geben Sie die Drehzahlkurve des Übergangs
Der transition-timing-function Eigenschaft gibt die Geschwindigkeitskurve des Übergangseffekts.
Der Übergang-Timing-Funktion Eigenschaft kann die folgenden Werte haben:
-
ease- einen Übergangseffekt mit einem langsamen Start gibt, dann schnell, dann langsam zu beenden (dies ist default) -
linear- gibt einen Übergangseffekt mit der gleichen Geschwindigkeit von Anfang bis Ende -
ease-in- gibt einen Übergangseffekt mit einem langsamen Start -
ease-out- gibt einen Übergangseffekt mit einem langsamen Ende -
ease-in-out- gibt einen Übergangseffekt mit einem langsamen Start und Ende -
cubic-bezier(n,n,n,n)- Hier können Sie Ihre eigenen Werte in einem definieren cubic-bezier - Funktion
Das folgende Beispiel zeigt die einige der verschiedenen Geschwindigkeitskurven, die verwendet werden können:
Beispiel
#div1 {transition-timing-function: linear;}
#div2
{transition-timing-function: ease;}
#div3 {transition-timing-function:
ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5
{transition-timing-function: ease-in-out;} Versuch es selber " Verzögerung der Übergangseffekt
Die transition-delay Eigenschaft gibt eine Verzögerung (in Sekunden) für den Übergangseffekt.
Das folgende Beispiel hat eine Verzögerung von 1 Sekunde vor dem Start:
Beispiel
div {
-webkit-transition-delay: 1s; /* Safari */
transition-delay: 1s;
} Versuch es selber " Transition + Transformation
Im folgenden Beispiel wird auch eine Transformation in den Übergangseffekt:
Beispiel
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Versuch es selber " Mehr Transition Beispiele
Die CSS3 Übergangseigenschaften kann man nach dem anderen, wie dies angegeben werden:
Beispiel
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Versuch es selber " oder durch die Kurzschrift - Eigenschaft mit transition :
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
CSS3 Transition Properties
Die folgende Tabelle listet alle die Übergangseigenschaften:
| Eigentum | Beschreibung |
|---|---|
| transition | Eine zusammenfassende Eigenschaft für die vier Übergangseigenschaften in einer einzigen Eigenschaft festlegen |
| transition-delay | Gibt eine Verzögerung (in Sekunden) für den Übergangseffekt |
| transition-duration | Gibt an, wie viele Sekunden oder Millisekunden ein Übergangseffekt in Anspruch nimmt |
| transition-property | Gibt den Namen der CSS-Eigenschaft der Übergangseffekt ist für |
| transition-timing-function | Gibt die Geschwindigkeitskurve des Übergangseffekt |