Home >Web Front-end >Front-end Q&A >How to use css animation-iteration-count property

How to use css animation-iteration-count property

藏色散人
藏色散人Original
2019-05-29 09:22:553884browse

css The animation-iteration-count attribute is used to define the number of animation playback times; setting the value of the animation-iteration-count attribute to infinite enables infinite loop playback of the animation.

How to use css animation-iteration-count property

#How to use the css animation-iteration-count property?

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

Syntax:

animation-iteration-count: n|infinite;

Description: n Defines the number of animation playback times. infinite specifies that the animation should be played infinitely.​

Note: Internet Explorer 9 and earlier versions do not support the animation-iteration-count property.

css animation-iteration-count property usage 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:

How to use css animation-iteration-count property

The above is the detailed content of How to use css animation-iteration-count property. For more information, please follow other related articles on the PHP Chinese website!

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