CSS3 Übergangseffekt

CSS3Die Übergangsfunction ermöglicht es, dass Änderungen der CSS-Eigenschaftswerte während der angegebenen Dauer glatt ablaufen.

CSS verstehen3Übergang

Normalerweise wird das Ergebnis der Darstellung sofort aktualisiert, wenn der Wert einer CSS-Eigenschaft geändert wird. Ein häufiges Beispiel ist die Änderung der Hintergrundfarbe eines Buttons bei der Mausüberlegung. Unter normalen Umständen ändert sich die Hintergrundfarbe des Buttons sofort von der alten auf die neue Eigenschaftswert, wenn der Cursor auf den Button gesetzt wird.

CSS3eine neue Übergangsfunktion eingeführt hat, die es Ihnen ermöglicht, Attribute mit der Zeit glatt von alten auf neue Werte zu animieren.

Der folgende Beispiel zeigt Ihnen, wieHintergrund-FarbeAnimation für HTML-Schaltflächen bei der Mausüberlegung.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Für　Safari　3.0+　*/
　　　　-webkit-transition-Eigenschaft: Hintergrund;
　　　　-webkit-transition-Dauer:　2s;
　　　　
　　　　transition-Eigenschaft: Hintergrund;
　　　　transition-Dauer:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Sie müssen mindestens zwei Eigenschaften Übergang angeben-Eigenschaft und Übergang-Dauer (größer als 0), um eine Übergangsfolge zu erzeugen. Aber alle anderenÜbergangseigenschaftensind optional, da ihre Standardwerte den Übergang nicht verhindern.

Mehrere Transformationen ausführen

Jede Übergangs-Eigenschaft kann mehrere Werte haben und durch Kommas getrennt werden, was eine einfache Methode bietet, um mehrere Übergänge mit verschiedenen Einstellungen gleichzeitig zu definieren.

button　{
　　　　background:　#fd7c2a;
　　　　Rand:　3px fester #dc5801;
　　　　/*　Für　Safari　3.0+　*/
　　　　-webkit-transition-Eigenschaft: Hintergrund, Rand;
　　　　-webkit-transition-Dauer:　1s,　2s;
　　　　
　　　　transition-Eigenschaft: Hintergrund, Rand;
　　　　transition-Dauer:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color:　#288049;
}

Übergangskurzform

Viele Eigenschaften müssen bei der Anwendung von Übergängen berücksichtigt werden. Allerdings kann auch in einer Eigenschaft alle Übergangseigenschaften angegeben werden, um den Code zu verkürzen.

Übergangseigenschaften sind eine Kurzform, um alle einzelnen Übergangseigenschaften in der angegebenen Reihenfolge einmalig zu setzen (d.h. die abgekürzte Eigenschaft transition-property, transition-duration, transition-timing-function und transition-delay in der angegebenen Reihenfolge).

Wenn Sie diese Eigenschaft verwenden, müssen Sie unbedingt der folgenden Reihenfolge der Werte folgen.

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　Für　Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

CSS3Übergangseigenschaften

Die folgende Tabelle gibt eine kurze Übersicht über alle Übergangseigenschaften: