Heim > Artikel > Web-Frontend > Kann CSS3 Animationen nur einmal implementieren?
Kann CSS3 Animationen nur einmal implementieren?
- WBOYOriginal
- 2022-03-29 16:11:391824Durchsuche
CSS3 kann Animationen nicht nur einmal implementieren; Sie können das Attribut „animation-iteration-count“ verwenden, um die Anzahl der Wiedergabezeiten der Animation zu definieren Die Syntax lautet „Animation-Iteration-Count: Anzahl der Wiedergaben“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
Kann CSS3 nur eine Animation erreichen?
Kann CSS3 nicht nur eine Animation erreichen?
Verwenden Sie einfach „animation-iteration-count“. Das Attribut „animation-iteration-count“ definiert, wie oft die Animation abgespielt werden soll. Der Standardwert ist eins.
Syntax
animation-iteration-count: value;
- n Eine Zahl, die definiert, wie oft die Animation abgespielt werden soll.
- unendlich gibt an, dass die Animation unendlich oft (für immer) abgespielt werden soll. Das Beispiel lautet wie folgt:
<html> <head> <meta charset="utf-8"> <title>123</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:3; /* Safari and Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:3; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari and Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意：</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。</p> <div></div> </body> </html>Ausgabeergebnis:
(Teilen von Lernvideos:
CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonKann CSS3 Animationen nur einmal implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!