Home > Article > Web Front-end > What to do if css3 animation does not loop

What to do if css3 animation does not loop

醉折花枝作酒筹Original: 2021-07-23 11:38:563068browse

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.

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;

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>

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!

html5 css css3 count 循环 animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to rotate cssNext article：How to rotate css

See more

What to do if css3 animation does not loop

Related articles