Que dois-je faire si l'animation CSS ne boucle pas ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2021-12-29 15:09:14

original

2700 Les gens l'ont consulté

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>

Copier après la connexion

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 */
}

Copier après la connexion

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;

Copier après la connexion

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!