Heim > Artikel > Web-Frontend > Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?
Welche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?
- 青灯夜游Original
- 2022-03-18 15:46:012498Durchsuche
Die CSS3-Animation wird nur einmal wiederholt und mit dem Attribut „animation-iteration-count“ festgelegt. Dieses Attribut kann die Anzahl der Ausführungen der Animation angeben. Wenn der Wert dieses Attributs 1 ist, kann die Animation auf eine Schleife festgelegt werden nur einmal; die Syntax „element {animation-iteration“ -count:1;}“.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer. Die
css3-Animation wird nur einmal wiederholt und mit dem Attribut animation-iteration-count festgelegt.
Das Attribut „animation-iteration-count“ kann die Anzahl der Ausführungen der Animation angeben und definieren, wie oft die Animation abgespielt werden soll.
Wenn der Wert dieses Attributs 1 ist, kann die Animation so eingestellt werden, dass sie nur einmal wiederholt wird.
Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 3s;
animation-iteration-count: 1;
/* Safari and Chrome */
-webkit-animation: mymove 3s;
-webkit-animation-iteration-count: 1;
}
@keyframes mymove {
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
0% {
top: 0px;
}
50% {
top: 200px;
}
100% {
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)
Das obige ist der detaillierte Inhalt vonWelche Attribute werden für CSS3-Animationen verwendet, die nur einmal wiederholt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!