Heim > Artikel > Web-Frontend > Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien
Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien
- 云罗郡主Original
- 2018-10-22 13:55:403086Durchsuche
Die Front-End-Funktion ist sehr leistungsfähig. Wie kann man CSS zum Erstellen von Animationen verwenden? Verwenden Sie CSS, um Animationen zu erstellen. Schauen Sie sich diese CSS-Animationstechniken für Sie an.
Ohne über die Implementierung von CSS-Animationen zu sprechen, sprechen wir zunächst über die Beziehung zwischen HTML und CSS, da die Animation am Frontend der Website aus CSS-Animationen und JS besteht Derzeit können mit CSS-Animationen nur einige einfache Animationen erstellt werden. Bei der Verwendung von CSS gibt es viele Einschränkungen, einschließlich der Unfähigkeit, Animationen für den PC zu erstellen Für den mobilen Einsatz können Sie CSS verwenden, um es zu erstellen.
CSS-Animation ist eigentlich die Weiterentwicklung von Elementen von einem Stil zum anderen. Derzeit können CSS-Stile durch Animation und @keyframes implementiert werden, und @keyframes definiert die Anzahl der Frames, um Animationseffekte auszuführen. Die Animation hat 8 Attribute und legt den Namen der Animation, die Zeit der Animation, die Geschwindigkeitskurve der Animation und einige relativ einfache Vorschriften fest.
Keyframes geben den Zeitpunkt an, zu dem die Animation stattfindet. Wir können die Schlüsselwörter „von“ und „bis“ verwenden, also die Startzeit und die Endzeit. Im Allgemeinen verwenden Experten 0 % und 100 %, um den Selektor zu definieren.
Zum Beispiel: 0 % {background:red:0px; top:0px;} bedeutet, dass die Animation unverändert bleibt, 100 % {background:red:200px; top: 0px;}, wenn Rot wieder erscheint, wird es um 200 relativ nach links verschoben.
Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme aller Einführungen in die CSS-Animationstechnologie. Wenn Sie mehr über CSS-Video-Tutorials erfahren möchten, schauen Sie sich bitte die chinesische PHP-Website an.
Das obige ist der detaillierte Inhalt vonWie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!