Maison > Article > interface Web > CSS3 ne peut-il implémenter l'animation qu'une seule fois ?
CSS3 ne peut-il implémenter l'animation qu'une seule fois ?
- WBOYoriginal
- 2022-03-29 16:11:391879parcourir
CSS3 ne peut pas implémenter l'animation une seule fois ; vous pouvez utiliser l'attribut "animation-iteration-count" pour définir le nombre de fois de lecture de l'animation. Lorsque la valeur de l'attribut est définie sur infinie, le nombre de fois de lecture est illimité et le nombre de fois de lecture est illimité. La syntaxe est « animation-iteration-count : nombre de lectures ».
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
CSS3 ne peut-il réaliser qu'une seule animation ?
CSS3 ne peut-il pas réaliser une seule animation ?
Utilisez simplement animation-iteration-count. L'attribut
animation-iteration-count définit combien de fois l'animation doit être jouée. La valeur par défaut est un.
Syntaxe
animation-iteration-count: value;
n Un nombre qui définit combien de fois l'animation doit être jouée
infinite précise que l'animation doit être jouée un nombre infini de fois (pour toujours)
L'exemple est le suivant :
<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>Résultat de sortie :
(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!