Heim > Artikel > Web-Frontend > Was soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?
Das Attribut „animation-iteration-count“ kann in CSS verwendet werden, um das Problem zu lösen, dass die Animation nicht wiederholt wird. Dieses Attribut definiert die Anzahl der Wiedergaben der Animation. Sie müssen nur „animation-iteration-count:infinite;“ festlegen. „Stil für die Animation, um eine Endlosschleife zu erreichen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Die Animation in CSS läuft nicht in einer Schleife, was durch die Verwendung des Attributs „animation-iteration-count“ gelöst werden kann.
Zum Beispiel:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; background: pink; margin: 100px; animation: mymove 5s; -webkit-animation: mymove 5s; /* Safari and Chrome */ } @keyframes mymove { 50% { transform: rotate(360deg); } } @-webkit-keyframes mymove{ /* Safari and Chrome */ 50% { transform: rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>
Nur Vorwärts- und Rückwärtsdrehung überläuft, und es gibt keine Schleife, um eine Drehung zu erreichen. Ganz einfach, verwenden Sie einfach das Attribut „animation-iteration-count“, um das Problem zu lösen.
div { width: 100px; height: 100px; background: pink; margin: 100px; animation: mymove 5s; -webkit-animation: mymove 5s; /* Safari and Chrome */ animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;/* Safari and Chrome */ }
Anleitung:
Verwenden Sie das Attribut „animation-iteration-count“, um zu definieren, wie oft die Animation abgespielt wird. Syntax:
animation-iteration-count: value;
Wert | Beschreibung |
---|---|
n | Eine Zahl, die definiert, wie oft die Animation abgespielt werden soll |
unendlich | Gibt an, dass die Animation unendlich abgespielt werden soll mal ( für immer) |
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn CSS-Animate nicht in einer Schleife ausgeführt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!