Wie man Übergänge mit CSS3

Sprechen Sie über leistungsstarke neue Funktionen in Cascading Style Sheets (CSS): Durch die Paarung :schweben Pseudo-Klasse mit dem CSS3 Übergang Eigenschaft können Sie glatt interaktive Funktionen, um Ihre Objekte ohne die Verwendung von Flash, javascript oder jQuery hinzufügen!

Das Übergang Eigenschaft hat tatsächlich vier Einstellungen, die in der CSS in der folgenden Reihenfolge geschrieben werden sollte: Eigentum, Dauer, Timing-Funktion, verzögern.

Die folgende Liste beschreibt die Einstellungen:

  • Übergang-Eigenschaft: Gibt an, welche CSS-Eigenschaft wird, wie das ändern Breite oder Höhe, wie in Übergang-Eigenschaft: breiten-.

  • ÜbergangszeitLegt den Wert in Sekunden für den Übergang zu vollenden, wie in: Übergangsdauer: 5S-.

  • Übergang-Timing-Funktion: Gibt die Wirkung der Geschwindigkeitskurve. Die Werte können eingestellt werden, um linear, Leichtigkeit, Einfachheit in, Leichtigkeit-out, Leichtigkeit-in-out, oder kubisch-Bezier (n,n,n,n), wie in diesem Beispiel: Übergang-Timing-Funktion: linear-, das entspricht kubisch-Bezier (0,0,1,1).

  • Übergang-VerzögerungLegt fest, wie viele Sekunden verstreichen, bevor der Effekt beginnt, wie in: Übergangsverzögerung: 2S-.

Im folgenden Codebeispiel wird nach einer Verzögerung von 2 Sekunden, eine Orange Box problemlos Änderungen mehr als 5 Sekunden von 100px auf 500px breit, wenn ein Besucher die Maus über den Behälter schwebt:

 

Menü