| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
The animation-iteration-count property in CSS is used to specify the number of times an animation should be played. It can be set to a specific number or to infinite for endless repetition.
Syntax
selector {
animation-iteration-count: number | infinite;
}
Values
- number: A positive integer that specifies the number of times the animation will play.
- infinite: The animation will repeat indefinitely.
Examples
Example 1: Single Iteration
This example shows an animation that runs only once.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Iteration Animation</title>
<style>
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.single-iteration {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 1;
}
</style>
</head>
<body>
<div class="single-iteration"></div>
</body>
</html>
In this example, the single-iteration class defines an animation that changes the background color from red to yellow over 2 seconds and runs only once.
Example 2: Multiple Iterations
This example shows an animation that runs three times.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Iterations Animation</title>
<style>
@keyframes example {
from {background-color: blue;}
to {background-color: green;}
}
.multiple-iterations {
width: 100px;
height: 100px;
background-color: blue;
animation-name: example;
animation-duration: 3s;
animation-iteration-count: 3;
}
</style>
</head>
<body>
<div class="multiple-iterations"></div>
</body>
</html>
In this example, the multiple-iterations class defines an animation that changes the background color from blue to green over 3 seconds and runs three times.
Example 3: Infinite Iterations
This example shows an animation that runs indefinitely.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Iterations Animation</title>
<style>
@keyframes example {
from {background-color: purple;}
to {background-color: orange;}
}
.infinite-iterations {
width: 100px;
height: 100px;
background-color: purple;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<div class="infinite-iterations"></div>
</body>
</html>
In this example, the infinite-iterations class defines an animation that changes the background color from purple to orange over 4 seconds and runs indefinitely.
The animation-iteration-count property is useful for controlling the number of times an animation sequence is played. By setting this property, you can create animations that run a fixed number of times or continue indefinitely.
