What should I do if css animate does not loop?-Front-end Q&A-php.cn

What should I do if css animate does not loop?

青灯夜游

Release： 2021-12-29 15:09:14

Original

2709 people have browsed it

The animation-iteration-count attribute can be used in css to solve the problem of animate not looping. This attribute defines the number of times the animation is played. You only need to set the "animation-iteration-count:infinite;" style to the animation to achieve this. Loop infinitely.

What should I do if css animate does not loop?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Animate in css does not loop, which can be solved by using the animation-iteration-count attribute.

For example:

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

Copy after login

What should I do if css animate does not loop?

Only forward and reverse rotation overflows, and there is no loop to achieve rotation. How to do this? Simple, just use the animation-iteration-count attribute to solve it.

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

Copy after login

What should I do if css animate does not loop?

Instructions:

Use the animation-iteration-count attribute to define the number of times the animation is played. Syntax:

animation-iteration-count: value;

Copy after login

Value	Description
n	A number that defines how many times the animation should be played
infinite	Specifies that the animation should be played infinite times (forever)

(Learning video sharing: css video tutorial)

The above is the detailed content of What should I do if css animate does not loop?. For more information, please follow other related articles on the PHP Chinese website!