Verwendung von CSS-Animationseigenschaften und Beispielcode (Übergang/Transformation/Animation)

Während der Entwicklung wird eine gute Benutzeroberfläche immer mit einigen Animationen kombiniert. CSS verwendet so wenig Code wie möglich, um den Benutzern das beste Erlebnis zu bieten. Im Folgenden habe ich einige Verwendungsmethoden und Anwendungsfallcodes von CSS-Animationsattributen zu Ihrer Information zusammengefasst. Wenn Fehler vorhanden sind, können Sie diese gerne direkt kommentieren.

1 Übergang

Verwendungssyntax:

Übergang: Eigenschaftsdauer, Zeitfunktionsverzögerung;

Parameter:

(1) Eigenschaft (CSS-Eigenschaftsname zum Festlegen des Übergangseffekts): keine | alle | Eigenschaft. „Keine“ bedeutet, dass keine Eigenschaft den Übergangseffekt erhält; „Alle“ bedeutet, dass alle Eigenschaften den Übergangseffekt erhalten; „Eigenschaft“ bedeutet eine CSS-Eigenschaftenliste, in der mehrere Eigenschaften durch Kommas (,) getrennt sind.

(2) Dauer (legt die Zeit fest, die zum Abschließen des Übergangseffekts benötigt wird): Sekunden oder Millisekunden (s/ms).

(3) Timing-Funktion (legt die Geschwindigkeitskurve des Effekts fest): linear, gibt an, dass der Effekt mit der gleichen Geschwindigkeit beginnt und endet, entspricht cubic-bezier(0,0,1,1); ease, beginnt langsam und endet langsam, entspricht cubic-bezier(0.25,0.1,0.25,1); ease-in, beginnt langsam, entspricht cubic-bezier(0.42,0,1,1); ease-out, endet langsam, entspricht cubic-bezier(0,0,0.58,1); ease-in-out, beginnt und endet langsam, entspricht cubic-bezier(0.42,0,0.58,1); cubic-bezier(n,n,n,n), definieren Sie in dieser Funktion Ihren eigenen Wert, der Wert liegt zwischen 0 und 1.

(4) Verzögerung (wann der Übergangseffekt beginnt): der Wert, der angibt, wie viele Sekunden es dauert, bis der Übergangseffekt ausgeführt wird. Beispielsweise bedeutet 2s, dass er nach 2 Sekunden ausgeführt wird.

2 transform

Die Transform-Eigenschaft wendet eine 2D- oder 3D-Transformation an. Diese Eigenschaft ermöglicht es uns, vier Operationen an Elementen durchzuführen: Drehen, Skalieren, Neigen und Verschieben.

Verwenden Sie die Syntax:

transformieren: keine|Transformationsfunktionen;

Parameter:

(1) none: Gibt an, dass keine Konvertierung durchgeführt wird. Dies wird im Allgemeinen verwendet, um die Konvertierung zu registrieren.

(2) transform-functions: definiert den Typ der zu transformierenden Funktion. Die wichtigsten sind:

Drehen: Hauptsächlich unterteilt in 2D-Rotation und 3D-Rotation. drehen(Winkel), 2D-Rotation, der Parameter ist der Winkel, z. B. 45 Grad; drehen(x,y,z,Winkel), 3D-Rotation, 3D-Rotation um die Linie von der ursprünglichen Position zu (x,y,z); drehenX(Winkel), 3D-Rotation entlang der X-Achse; drehenY(Winkel); drehenZ(Winkel);

Skalieren: Wird im Allgemeinen verwendet, um die Größe eines Elements festzulegen. Die Haupttypen sind dieselben wie oben, einschließlich scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y) und scaleZ(z), wobei x, y und z die Schrumpfungsverhältnisse sind.

Neigen: Wird hauptsächlich verwendet, um den Stil eines Elements zu neigen. skew(x-Winkel, y-Winkel), 2D-Schieftransformation entlang der x- und y-Achse; skewX(Winkel), 2D-Schieftransformation entlang der x-Achse; skew(Winkel), 2D-Schieftransformation entlang der y-Achse.

Verschieben (Verschieben): Wird hauptsächlich zum Verschieben von Elementen verwendet. translate(x, y) definiert die Pixelpunkte, die entlang der x- und y-Achse verschoben werden; translate(x, y, z) definiert die Pixelpunkte, die entlang der x-, y- und z-Achse verschoben werden; translateX(x); translateY(y); translateZ(z).

3 Animationen

Diese Eigenschaft wird hauptsächlich zum Festlegen von Animationseigenschaften verwendet.

Verwenden Sie die Syntax:

Animation: Name Dauer Zeitfunktion Verzögerung Iterationszählung Richtung;

Parameter:

(1) Name: Der Keyframe-Name, der an den Selektor gebunden werden muss.

(2) Dauer: Die zum Abschließen der Animation benötigte Zeit in Sekunden oder Millisekunden.

(3) Timing-Funktion: die Bewegungsgeschwindigkeitskurve der Animation. linear, gibt an, dass die Geschwindigkeit mit der gleichen Geschwindigkeit beginnt und endet, was äquivalent zu cubic-bezier(0,0,1,1) ist; ease, beginnt langsam und endet dann langsam, was äquivalent zu cubic-bezier(0.25,0.1,0.25,1) ist; ease-in, beginnt langsam, was äquivalent zu cubic-bezier(0.42,0,1,1) ist; ease-out, endet langsam, was äquivalent zu cubic-bezier(0,0,0.58,1) ist; ease-in-out, beginnt und endet langsam, was äquivalent zu cubic-bezier(0.42,0,0.58,1) ist; cubic-bezier(n,n,n,n), definiert seinen eigenen Wert in dieser Funktion, und der Wert liegt zwischen 0 und 1.

(4) delay: Legt die Verzögerung fest, bevor die Animation startet.

(5) Iterationsanzahl: Legt fest, wie oft die Animation ausgeführt wird.

(6) Richtung: Gibt an, ob die Animation rückwärts abgefragt werden soll. normal, der Standardwert, die Animation sollte normal abgespielt werden; alternativ, die Animation sollte in umgekehrter Reihenfolge abgespielt werden.

Nachfolgend sehen Sie den Testcode für diese Elemente:

<!DOCTYPE html>
<html>
<Kopf>
    <title>Übergang/Transformation</title>
</Kopf>
<style type="text/css">
    #div1 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: rot;
    }
    #div2 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: grün;
    }
    #div3 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: blau;
    }
    #div4 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: #234F21;
    }
    #div5 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: #af123c;
    }
    #div6 {
        schweben: links;
        Höhe: 100px;
        Breite: 100px;
        Hintergrundfarbe: #affa3c;
    }
    /* Übergang implementiert mehrere Eigenschaften */
    #div1:aktiv {
        Breite: 200px;
        Höhe: 200px;
        Übergang: Breite 2 s mühelos, Höhe 2 s mühelos;
        -moz-transition: Breite 2s, Höhe 2s; /* Firefox 4 */
        -webkit-transition: Breite 2s Leichtigkeit, Höhe 2s Leichtigkeit; /* Safari und Chrome */
        -o-transition: Breite 2s Pause, Höhe 2s Pause; /* Opera */
    }
    /* transformieren drehen */
    #div2:hover {
        transformieren: drehen (35 Grad);
        -ms-transform:rotate(35deg); /* IE 9 */
        -moz-transform:rotate(35deg); /* Firefox */
        -webkit-transform:rotate(35deg); /* Safari und Chrome */
        -o-transform:drehen(35Grad); /* Opera */
    }
    /* Maßstab transformieren */
    #div3:hover {
        transformieren: Maßstab (0,8, 1,5);
        -ms-transform:scale(0.8, 1.5); /* IE 9 */
        -moz-transform:scale(0.8, 1.5); /* Feuerfuchs */
        -webkit-transform:scale(0.8, 1.5); /* Safari und Chrome */
        -o-transform:scale(0.8, 1.5); /* Opera */
    }
    /* Schiefe transformieren */
    #div4:hover {
        transformieren: schräg(35 Grad);
        -ms-transform:skew(35deg); /* IE 9 */
        -moz-transform:skew(35deg); /* Firefox */
        -webkit-transform:skew(35deg); /* Safari und Chrome */
        -o-transform:skew(35deg); /* Opera */
    }
    /* transformieren übersetzen */
    #div5:hover {
        transformieren: übersetzen(45px, 45px);
        -ms-transform:translate(45px, 45px); /* IE 9 */
        -moz-transform:translate(45px, 45px); /* Feuerfuchs */
        -webkit-transform:translate(45px, 45px); /* Safari und Chrome */
        -o-transform:translate(45px, 45px); /* Opera */
    }
    /* mehrere Effekte transformieren */
    #div6:hover {
        transformieren: drehen (35 Grad) skalieren (0,8, 1,5) schiefstellen (35 Grad) verschieben (45 Pixel, 45 Pixel);
        -ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */
        -moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px) translate(45px, 45px); /* Safari und Chrome */
        -o-transform:drehen(35 Grad) skalieren(0,8, 1,5) verzerren(35 Grad) übersetzen(45px, 45px); /* Opera */
    }
</Stil>
<Text>
    <div id="div1">Übergang</div>
    <div id="div2">transformieren drehen</div>
    <div id="div3">Skalierung transformieren</div>
    <div id="div4">Transformationsschiefe</div>
    <div id="div5">transformieren übersetzen</div>
    <div id="div6">transformieren</div>
</body>
</html>

<!DOCTYPE html>
<html>
<Kopf>
    <title>Übergang/Transformation</title>
</Kopf>
<style type="text/css">
    /* Animation */
    .div7 {
        Breite: 100px;
        Höhe: 100px;
        Hintergrund: rot;
        Position: relativ;
        Animation: meine ersten 5 Sekunden unendlich;
        Animationsrichtung: alternativ;
        /* Safari und Chrome */
        -webkit-animation:meine ersten 5 Sekunden unendlich;
        -webkit-animation-direction:alternative;
    }
    @keyframes meinerstes{
        0 % {Hintergrund:rot; links:0px; oben:0px;}
        25 % {Hintergrund: gelb; links: 200px; oben: 0px;}
        50 % {Hintergrund: blau; links: 200 px; oben: 200 px;}
        75 % {Hintergrund: grün; links: 0px; oben: 200px;}
        100 % {Hintergrund:rot; links:0px; oben:0px;}
    }
    @-webkit-keyframes myfirst {/* Safari und Chrome */
        0 % {Hintergrund:rot; links:0px; oben:0px;}
        25 % {Hintergrund: gelb; links: 200px; oben: 0px;}
        50 % {Hintergrund: blau; links: 200 px; oben: 200 px;}
        75 % {Hintergrund: grün; links: 0px; oben: 200px;}
        100 % {Hintergrund:rot; links:0px; oben:0px;}
    }
  @-moz-keyframes meinerstes {/* Firefox */
    0 % {Hintergrund:rot; links:0px; oben:0px;}
        25 % {Hintergrund: gelb; links: 200px; oben: 0px;}
        50 % {Hintergrund: blau; links: 200 px; oben: 200 px;}
        75 % {Hintergrund: grün; links: 0px; oben: 200px;}
        100 % {Hintergrund:rot; links:0px; oben:0px;}
  }
  @-o-keyframes mein erstes {/* Opera */
    0 % {Hintergrund:rot; links:0px; oben:0px;}
        25 % {Hintergrund: gelb; links: 200px; oben: 0px;}
        50 % {Hintergrund: blau; links: 200 px; oben: 200 px;}
        75 % {Hintergrund: grün; links: 0px; oben: 200px;}
        100 % {Hintergrund:rot; links:0px; oben:0px;}
  }
</style> <body> <div class="div7">Animation</div> </body> </html>

Zusammenfassen

Oben finden Sie eine Einführung in die Verwendung von CSS-Animationsattributen und Beispielcode (Übergang/Transformation/Animation) durch den Editor. Ich hoffe, es ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten!