communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
recherche
logo
  • Se connecter
  • S'inscrire
Réinitialisation du mot de passe réussie

Suivez les projets qui vous intéressent et découvrez les dernières actualités les concernant.

Temps de boucle d'animation CSS3

Explication détaillée de l'attribut animation-iteration-count de CSS3 :
Cet attribut est utilisé pour définir la durée de transition de l'animation.
Pour plus d'informations sur l'attribut animation, veuillez vous référer à l'explication détaillée de l'utilisation de l'attribut animation en CSS3.
Structure grammaticale :

animation-iteration-count：infinite | <number> [ , infinite | <number> ]*

Analyse des paramètres :
1.infinite : Spécifie que l'animation peut boucler à l'infini.
2.number : Spécifiez explicitement le nombre de boucles d'animation.
Remarque spéciale :
Si plusieurs valeurs d'attribut sont fournies, séparez-les par des virgules.
La fonctionnalité de script correspondante est animationIterationCount.
Exemple de code :
Exemple 1 :

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="//m.sbmmt.com/" />   
<title>php中文网</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
       
  animation:theanimation infinite alternate; 
  -webkit-animation:theanimation  alternate ; 
  -moz-animation:theanimation  alternate ; 
  -o-animation:theanimation  alternate ; 
  -ms-animation:theanimation  alternate ; 
     
  -webkit-animation-duration:8s;
  -moz-animation-duration:8s;
  -o-animation-duration:8s;
  -ms-animation-duration:8s;
  animation-duration:8s;
   
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -o-animation-iteration-count:infinite;
  -ms-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
} 
@keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-moz-keyframes theanimation{ 
  0% {top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-webkit-keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
@-o-keyframes theanimation{ 
  0%{top:0px;left:0px;background:red;} 
  25%{top:0px;left:100px;background:blue;} 
  50%{top:100px;left:100px;background:yellow;} 
  75%{top:100px;left:0px;background:green;} 
  100%{top:0px;left:0px;background:red;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

L'animation définie par le code ci-dessus peut boucler à l'infini.
Exemple 2 :

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" />   
<title>蚂蚁部落</title>  
<style type="text/css">  
div{ 
  width:100px; 
  height:100px; 
  background:red; 
  position:relative; 
       
  animation:firstanimation 5s alternate,secondanimation 2s  alternate; 
  -webkit-animation:firstanimation 5s alternate,secondanimation 2s alternate; 
  -moz-animation:firstanimation 5s  alternate,secondanimation 2s alternate; 
  -o-animation:firstanimation 5s alternate,secondanimation 2s alternate; 
  -ms-animation:firstanimation 5s alternate,secondanimation 2s alternate; 
   
  -webkit-animation-iteration-count:infinite,2;
  -moz-animation-iteration-count:infinite,2;
  -o-animation-iteration-count:infinite,2;
  -ms-animation-iteration-count:infinite,2;
  animation-iteration-count:infinite,2;
}
@keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-webkit-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-moz-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-o-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
} 
@-ms-keyframes firstanimation{ 
  0% {left:0px;} 
  100% {left:200px;} 
}
@keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-webkit-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-moz-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-o-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
@-ms-keyframes secondanimation{ 
  0% {top:0px;} 
  100% {top:200px;} 
} 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

Le code ci-dessus utilise l'attribut animation-iteration-count pour spécifier deux paramètres, qui sont le nombre d'exécutions des deux animations.

Formation continue
nouveau fichier
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="//m.sbmmt.com/" /> <title>php中文网</title> <style type="text/css"> div{ width:100px; height:100px; background:red; position:relative; animation:theanimation infinite alternate; -webkit-animation:theanimation alternate ; -moz-animation:theanimation alternate ; -o-animation:theanimation alternate ; -ms-animation:theanimation alternate ; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; -ms-animation-duration:8s; animation-duration:8s; -webkit-animation-iteration-count:infinite; -moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite; -ms-animation-iteration-count:infinite; animation-iteration-count:infinite; } @keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-moz-keyframes theanimation{ 0% {top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-webkit-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } @-o-keyframes theanimation{ 0%{top:0px;left:0px;background:red;} 25%{top:0px;left:100px;background:blue;} 50%{top:100px;left:100px;background:yellow;} 75%{top:100px;left:0px;background:green;} 100%{top:0px;left:0px;background:red;} } </style> </head> <body> <div></div> </body> </html>
Réinitialiser le code
Opération automatique
soumettre
logo
Aperçu Clear
Section précédente
section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Gratuit Tutoriel CSS3 de l'entrée à la maîtrise
Gratuit Tutoriel pratique Webpack5 (de l'entrée à la maîtrise)
Gratuit Tutoriel Web Front-end Promise de l'entrée à la maîtrise
Gratuit jQuery de l'entrée à la maîtrise
Gratuit HTML5+CSS3 de base front-end de l'entrée à la maîtrise (version complète)
Gratuit Tutoriel vidéo React, de la prise en main à la maîtrise
Gratuit Tutoriel super détaillé de la prise en main à la maîtrise de Redis6
Gratuit Tutoriel vidéo Backend.com ECShop, de la prise en main à la maîtrise
Gratuit Tutoriel vidéo Geek Academy Linux, de la prise en main à la maîtrise
Gratuit Manuel d'auto-apprentissage complet PHP
Gratuit Manuel de référence en chinois JavaScript
Gratuit Manuel de développement HTML
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~
Les étudiants qui ont regardé ce cours apprennent également
496452
Parlons brièvement de la création d'une entreprise en PHP Introduction rapide au développement web front-end Développement pratique à grande échelle par Tianlongbabu du cadre MVC version Mini imitant le site Web de l'encyclopédie des choses embarrassantes Premiers pas avec le développement pratique PHP : création rapide de PHP [Small Business Forum] Vérification de connexion et forum de discussion classique Collecte de connaissances sur les réseaux informatiques Démarrage rapide de la version complète de Node.JS Le cours front-end qui vous comprend le mieux : HTML5/CSS3/ES6/NPM/Vue/...[Original] Écrivez votre propre framework PHP MVC (40 chapitres en profondeur/gros détails/à lire absolument pour que les débutants progressent)