Home >Web Front-end >Front-end Q&A >What should I do if css animate does not loop?
What should I do if css animate does not loop?
- 青灯夜游Original
- 2021-12-29 15:09:142737browse
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:
<!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>
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;
| 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!