recherche

Maison >interface Web >Questions et réponses frontales >Que dois-je faire si l'animation CSS ne boucle pas ?

Que dois-je faire si l'animation CSS ne boucle pas ?

青灯夜游
青灯夜游original
2021-12-29 15:09:142738parcourir

L'attribut animation-iteration-count peut être utilisé en CSS pour résoudre le problème de l'animation qui ne boucle pas. Cet attribut définit le nombre de fois que l'animation est jouée. Il vous suffit de définir le "animation-iteration-count:infinite; " style à l'animation pour obtenir une boucle infinie.

Que dois-je faire si l'animation CSS ne boucle pas ?

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

L'animation en CSS ne boucle pas, ce qui peut être résolu en utilisant l'attribut animation-iteration-count.

Par exemple : 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 100px;
				animation: mymove 5s;
				-webkit-animation: mymove 5s; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

Que dois-je faire si lanimation CSS ne boucle pas ?

Seules les rotations avant et arrière débordent, et il n'y a pas de boucle pour réaliser la rotation. Comment faire cela ? Simple, utilisez simplement l'attribut animation-iteration-count pour le résoudre. 

div {
	width: 100px;
	height: 100px;
	background: pink;
	margin: 100px;
	animation: mymove 5s;
	-webkit-animation: mymove 5s; /* Safari and Chrome */
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;/* Safari and Chrome */
}

Que dois-je faire si lanimation CSS ne boucle pas ?

Instructions :

Utilisez l'attribut animation-iteration-count pour définir le nombre de fois que l'animation est jouée. Syntaxe: 

animation-iteration-count: value;
Value Description
n a Numéro qui définit le nombre de fois que l'animation doit être lue
infinite spécifie que l'animation doit être jouée des temps infinis ( pour toujours)

(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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Qu'est-ce que CSS3 et HTML5Article suivant：Qu'est-ce que CSS3 et HTML5

Articles Liés

Voir plus