Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien

云罗郡主
Freigeben: 2018-10-22 13:55:40
Original
3094 Leute haben es durchsucht

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.

Wie implementiert man Animationen mit CSS? Machen Sie eine Bestandsaufnahme dieser CSS-Animationstechnologien

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage