CSS3 Übergang - Eigenschaft

Dies ist eines der Kapitel, über die ich mich am meisten gefreut habe - die Einführung in CSS3-Übergänge! CSS-Übergänge sind ein Präsentationseffekt, mit dem Sie Eigenschaftsänderungen erstellen können, die z.B.: Mouseover oder Mausklick.

Mit den CSS3-Übergangsmodulen werden vier neue Eigenschaften eingeführt.

• Welche Eigenschaft oder Eigenschaften als Ziel ausgewählt werden sollen - Übergangseigenschaft
• Die Dauer des gegebenen Übergangs - Übergangsdauer
• Die Timing-Funktion des Übergangs - Transition-Timing-Funktion
• Und eine optionale Möglichkeit, den Übergang zu verzögern - Übergangsverzögerung

CSS3 Übergangs-Eigenschaft

Die Übergangseigenschaft legt fest, auf welche Eigenschaft der Übergang angewendet wird - sei es Farbe, Hintergrund, Rahmen usw.!

CSS3 Übergangs-dauer

Diese Eigenschaft gibt an, wie viele Sekunden oder Millisekunden ein Übergang benötigt, um abgeschlossen zu werden. Die Standardeinstellung ist 0, und es empfiehlt sich, niemals eine kürzere Dauer als 5-6 Millisekunden anzugeben, da das menschliche Auge Probleme hat, dies als Übergang zu erkennen, anstatt nur eine Änderung vorzunehmen.

Css3 Übergangs-Timing-Funktion

Mit der Übergangszeitfunktion können Sie die Geschwindigkeitskurve des Übergangseffekts ändern.

• Linear
• Ease-in - Gibt einen Übergang mit einem langsamen Start an
• Ease-out - Gibt einen Übergang mit einem langsamen Ende an
• Easy-In-Out - Gibt einen Übergang mit einem langsamen Anfang und Ende an.
• Cubic-beizer (n, n, n, n) - Definiert Ihr eigenes Übergangstiming. Mögliche Werte reichen von 0 bis 1. Da dies eine der Funktionen ist, die Sie wahrscheinlich nie verwenden müssen, werde ich nicht weiter darauf eingehen.

Glücklicherweise können alle diese vier Übergänge in nur einer Eigenschaft kombiniert werden - der Übergangseigenschaft.

Ich denke, es ist an der Zeit, ein Beispiel zu zeigen, oder? Das folgende Beispiel zeigt einen Übergang von der Farbe 'Crimson' zu 'CornFlowerBlue' mit einem Übergang, der 2 Sekunden dauert, langsamer wird (Beschleunigung) und ohne Verzögerung. Wenn wir die einzelnen Übergangseigenschaften verwenden würden, würde dies folgendermaßen aussehen:

transition-property: all;
transition-duration: 2sec;
transition-timing-function: ease-in;
transition-delay: 0;

Mit der kombinierten Methode, der Transition-Eigenschaft, sieht es so aus.

transition: all 2s ease-in 0;

Die Verwendung der einzelnen Übergangsdeklarationen ist eine gute Idee, wenn Sie mit CSS3 noch nicht vertraut sind, da Sie genau wissen, mit welchem Wert Sie arbeiten. Die Verwendung der kombinierten Deklaration kann jedoch auf lange Sicht Zeit sparen. (Wenn Sie einen intelligenten Webeditor verwenden, schreiben Sie Code so effizient, dass es keine Rolle spielt, für welche Option Sie sich entscheiden.)

Einfacher Hintergrundübergang

<style>
.bg-transition {
padding: 15px;
text-align: center;
background-color: Crimson;
width: 90%;
min-height: 25px;
transition: all 2s ease-in 0;
-webkit-transition: all 2s ease-in 0;}

.bg-transition:hover {
background-color: CornFlowerBlue;
}
</style>

<p class="bg-transition"> </p>

Dieser einfache Farbübergang kann auch für Text und Ränder verwendet werden und fügt z.B.: Link-Hover. Anstatt die Eigenschaft background-color zu verwenden, verwenden Sie einfach die Eigenschaft color oder border - und denken Sie daran, sie auch in der Pseudoklasse: hover zu ändern.

Gestylter Hintergrundübergang

<style>
.bg-transition {
padding: 15px;
border: 10px solid #2f2f2f;
font-size: 30px;
text-align: center;
font-family: 'Yanone Kaffeesatz', sans-serif;
background-color: rgba(163,169,169,0.3);
transition: all 2s;
-webkit-transition: all 1.2s ease-in;}

.bg-transition:hover {
background-color: rgba(47,47,47,1);
}
</style>

<p class="bg-transition">P-O-W-E-R-!</p>

Tipp!

Das Hinzufügen einer Verzögerung von 20-30 Millisekunden zu Ihren Übergängen ist eine gute Idee, wenn Sie eine Gruppe von Übergängen direkt nebeneinander haben. Die Verzögerung wird Ihrem Benutzer zwar nicht angezeigt, die Übergänge werden jedoch stabiler, wenn alle Übergänge innerhalb weniger Millisekunden ausgelöst werden.