Gängige Stile von CSS-Animationseffekten

Animation

Definieren Sie eine Animation:

/*Legen Sie einen Keyframe fest, um die bei jedem Schritt der Animation ausgeführte Aktion zu definieren*/
@keyframes meinebox{
            0 % {transformieren: übersetzen (0,0);}
            25 % {transform: übersetzen (200px, 0);}
            50 % {transform: übersetzen (200px, 200px);}
            75 % {transform: übersetzen (0,200px);}
            100 % {transform: übersetzen (0,0);}
        }

/*Referenzieren Sie Keyframes und legen Sie den Ausführungsstil der Animation fest*/
Animation: Mybox 5s 1s unendlich;

Notiz:

1. Kehren Sie nach dem Ende der Animation zur Ausgangsposition zurück.
2. von ->0% bis ->100%

animation-name: der Name der Animation (muss vorhanden sein)

Animationsdauer: die Dauer der Animation

Animationsverzögerung: Gibt an, wie lange es dauert, bis der Animationseffekt angezeigt wird

animation-iteration-count: definiert die Anzahl der Ausführungen der Animation

Der Standardwert ist: 1; unbegrenzt oft: unendlich

Animations-Timing-Funktion: Definiert den Animationseffekt Animations-Fill-Mode:

keine: Standardwert; der Stil wird nach einer Verzögerung wirksam;
rückwärts: Der Stil wird vor der Verzögerung wirksam;
vorwärts: Nachdem die Animation beendet ist, stoppt sie an der Endposition;
beides: hat die Eigenschaften von rückwärts und vorwärts;

Zusammenfassen

Dies ist das Ende dieses Artikels über die häufig verwendeten Stile von CSS-Animationseffekten. Weitere Inhalte zu häufig verwendeten Stilen von CSS-Animationen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!