Heim > Web-Frontend > CSS-Tutorial > Was ist Animation in CSS?

Was ist Animation in CSS?

王林
Freigeben: 2020-11-30 15:12:55
Original
6052 Leute haben es durchsucht

Animation in CSS ist ein abgekürztes Attribut, das zum Festlegen von Animationsattributen verwendet wird, z. B. [animation-duration], das die Zeit angibt, die zum Abschließen der Animation benötigt wird. Dieses Attribut muss angegeben werden, andernfalls ist die Animationsdauer 0 und kann nicht gespielt werden.

Was ist Animation in CSS?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3, dieser Artikel gilt für alle Computermarken. Das Attribut

animation ist ein Abkürzungsattribut zum Festlegen von sechs Animationsattributen:

(Empfehlung für Lernvideos: CSS-Video-Tutorial)

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
Nach dem Login kopieren

Hinweis: Bitte geben Sie immer das Attribut „animation-duration“ an, andernfalls ist die Dauer 0 Es wird keine Animation abgespielt.

Syntax:

animation: name duration timing-function delay iteration-count direction;
Nach dem Login kopieren

animation-name gibt den Keyframe-Namen an, der an den Selektor gebunden werden muss. .​

animation-duration ​ Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden.

animation-timing-function gibt die Geschwindigkeitskurve der Animation an.

animation-delay Gibt die Verzögerung an, bevor die Animation startet.

animation-iteration-count gibt an, wie oft die Animation abgespielt werden soll.

animation-direction Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll.

Beispiel:

Verwenden Sie abgekürzte Attribute, um Animationen an div-Elemente zu binden:

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
Nach dem Login kopieren

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist Animation in CSS?. 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