Detaillierte Erläuterung der Transition-Eigenschaft in CSS3 und gemeinsame Nutzung von Beispielen_CSS/HTML

1. Syntax der Übergangseigenschaft
[css]
Übergangseigenschaft: alle (alle Attribute geändert) || none (Keine Attributänderungen)

2. Attributwert der Übergangseigenschaft
(1) keine: Die Ausführung des Übergangs wird sofort gestoppt
(2) alle: Der Übergangseffekt wird ausgeführt, wenn sich ein Attributwert des Elements ändert
( 3) attr: Geben Sie den zu verschiebenden Stil an

1. Übergangseigenschaft – Geben Sie den zu verschiebenden Stil an

　1. Syntax der Übergangseigenschaft
[css]
Übergangseigenschaft: alle (alle Attribute geändert) ||. (Geben Sie den zu verschiebenden Stil an) ||.

2. Attributwert der Übergangseigenschaft
(1) keine: Die Ausführung des Übergangs wird sofort gestoppt
(2) alle: Der Übergangseffekt wird ausgeführt, wenn sich ein Attributwert des Elements ändert
( 3) attr: Geben Sie den zu verschiebenden Stil an

2. Übergangsdauer
Übergangsdauer ist die Dauer des angegebenen Elementkonvertierungsprozesses in Sekunden (s). Die Übergangsdauer kann für alle Elemente gelten, einschließlich :before und :after

Pseudoelement. Der Standardwert ist 0, was bedeutet, dass die Transformation sofort erfolgt.

3. Übergangsverzögerung – Verzögerungszeit
Mit der Übergangsverzögerung wird die Zeit angegeben, zu der eine Animation ausgeführt wird, d. h. wie lange es dauert, bis der Übergang nach der Änderung beginnt Elementattributwert. Wirkung, Einheit ist s (Sekunde)

, seine Verwendung ist der von „transition-duration“ sehr ähnlich und kann auch auf alle Elemente angewendet werden, einschließlich :before und :after Pseudoelemente. Die Standardgröße ist „0“, was bedeutet, dass die Transformation sofort ausgeführt wird,

Keine Verzögerungen.

4. Übergangs-Timing-Funktion – Geben Sie die Bewegungsform an
Übergangs-Timing-Funktion: Ease (allmählich langsamer) |. Linear (konstante Geschwindigkeit) |. |. Ease-Out (Verlangsamung) |. Ease-In-Out (zuerst beschleunigen und dann verringern).

Geschwindigkeit) |. Kubikbezier (Mit diesem Wert können Sie eine Zeitkurve anpassen) (Zahl, Zahl, Zahl, Zahl>)

5. Umfassende Schreibmethode des Übergangs
[css]Elementauswahl {Übergang: Bewegungsstil, Dauer, Bewegungsform, Verzögerungszeit;}

6. Umfassende und kompatible Schreibmethode des Übergangs

　1. Mozilla-Kernel

[css]
Elementselektor {-moz-transition: Bewegungsstil, Dauer, Bewegungsform, Verzögerungszeit;}

　2. Webkit-Kernel

[css]
Elementselektor {-webkit-transition: Bewegungsstil, Dauer, Bewegungsform, Verzögerungszeit;}

　3. Opera-Kernel

[css]
Elementselektor {-o-transition: Bewegungsstil, Dauer, Bewegungsform, Verzögerungszeit;}

　4. W3C-Standard

[css]
Elementselektor {Übergang: Bewegungsstil, Dauer, Bewegungsform, Verzögerungszeit;🎜>

Beispieleffekt:

Code kopieren Der Code lautet wie folgt:

a{transition:all .6s easy- in-out ;-webkit-transition:all .6s easy-in-out;-moz-transition:all .6s easy-in-out;-o-transition:all .6s easy-in-out;-ms-transition :alle .6s easy-in-out;}