What should I do if css animate does not loop?

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.

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:

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

Instructions:

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

animation-iteration-count: value;

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