Maison > Article > interface Web > Comment utiliser la propriété animation-iteration-count
Comment utiliser la propriété animation-iteration-count
- 青灯夜游original
- 2019-01-31 11:25:164486parcourir
L'attribut animation-iteration-count est utilisé pour définir le nombre de fois de lecture de l'animation. Définir la valeur de l'attribut animation-iteration-count sur infini peut obtenir une lecture en boucle infinie de l'animation.
Propriété CSS3 animation-iteration-count
Fonction : animation- L'attribut iteration-count définit le nombre de fois que l'animation est jouée.
Syntaxe :
animation-iteration-count: n|infinite;
n : Une valeur qui définit le nombre de fois de lecture de l'animation.
infini : Spécifie que l'animation doit être jouée à l'infini.
Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge la propriété animation-iteration-count.
Exemple d'utilisation de la propriété CSS3 animation-iteration-count
Définir la boucle d'animation 3 fois
<!DOCTYPE html>
<html>
<head>
<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>
<div></div>
</body>
</html>Rendu :
Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il pourra être utile à tout le monde, apprendre aide. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!