What to do if css3 animation does not loop-CSS Tutorial-php.cn

What to do if css3 animation does not loop

醉折花枝作酒筹

Release： 2023-01-07 11:45:27

Original

3162 people have browsed it

css3 animation does not loop. You can use the animation-iteration-count attribute to define the number of times the animation is played. Just add "animation-iteration-count:infinite;" to the animation to achieve infinite looping.

What to do if css3 animation does not loop

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

animation-iteration-count attribute defines the number of times the animation is played.

Grammar

animation-iteration-count: n|infinite;

Copy after login

What to do if css3 animation does not loop

Example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 3s;
animation-iteration-count:3;

/* Safari and Chrome */
-webkit-animation:mymove 3s;
-webkit-animation-iteration-count:3;
}

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation-iteration-count 属性。</p>

<div></div>

</body>
</html>

Copy after login

Effect:

What to do if css3 animation does not loop

Recommended learning : css video tutorial

The above is the detailed content of What to do if css3 animation does not loop. For more information, please follow other related articles on the PHP Chinese website!