Detaillierte Erklärung des Übergangsattributs einer einfachen CSS-Animation

1. Verständnis der Übergangsattribute

1. Das Übergangsattribut ist ein Kurzattribut, mit dem vier Übergangseigenschaften festgelegt werden können:

Übergangseigenschaft Der Name der CSS-Eigenschaft für den Übergangseffekt (Höhe, Breite, Deckkraft usw.).
Übergangsdauer: Die Zeit, die zum Abschließen des Übergangseffekts benötigt wird.
Die Übergangszeitfunktion gibt die Geschwindigkeitskurve eines Geschwindigkeitseffekts an.
Übergangsverzögerung: Wann beginnt der Übergangseffekt (Verzögerungszeit).

Hinweis: Wenn die Eigenschaft „Übergangsdauer“ 0 ist, tritt kein Übergangseffekt auf.

2. Der Wert der Gradientenfunktion:

Die Gradientenfunktion ist die Übergangszeitfunktion;

Der voreingestellte Wert der Bezier-Kurve

Die Leichtigkeit nimmt allmählich zu, die Geschwindigkeit ist gleichmäßig, die Verlangsamung erfolgt kubisch-bézier (0,25, 0,1, 0,25, 1)
allmählich schnelleres Einsteigen, gleichmäßige Geschwindigkeit kubisch-bézier (0,42, 0, 1, 1)
gleichmäßige Geschwindigkeit ausgleichen, kubisch-bezier verlangsamen (0,0,0,58,1)
ease-in-out ähnelt ease, hat aber eine größere Beschleunigung (größere Amplitude) als ease. cubic-bezier(0.42,0,0.58,1)
Lineare, gleichmäßige Geschwindigkeit im gesamten kubischen Bézier-Modus (0,0,1,1)

3. Abkürzung: Übergang: CSS-Attributname, Übergangszeit, Gradientenfunktionswert, Verzögerungszeit;

2. Einfache Animationsbeispieloperation

1. Fügen Sie zunächst zwei Bilder ein

<div Klasse="A">
        <img src="img/Medikamente einnehmen.jpg" alt="">
        <img src="img/main_bg.jpg" alt="">
    </div>

2. Legen Sie den Stil für das Bild fest

<Stil>
        .A {
            Rand: automatisch 100px;
            Höhe: 400px;
            Breite: 600px;
            Position: relativ;
        }
        .Ein img:nth-child(1) {
            Höhe: 300px;
            Breite: 300px;
            Position: absolut;
        }
        .Ein img:nth-child(2) {
            Höhe: 300px;
            Breite: 300px;
            Position: absolut;
            Übergang: Deckkraft 3 s, Einblendung 2 s;
        }
        .A img:nth-child(2):hover {
            Deckkraft: 0;
        }
        img {
            Höhe: 300px;
            Breite: 300px;
        }
        </Stil>

3. Der erzielte Animationseffekt ist:

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung des Übergangsattributs einer einfachen CSS-Animation, die vom Editor eingeführt wurde. Ich hoffe, dass es für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!