About Lesson
Animation Iteration Count
The animation-iteration-count property in CSS is used to specify the number of times an animation cycle should be played. It allows you to control how many times an animation should repeat before stopping. The value can be a specific number (e.g., 2, 3, etc.), infinite to repeat the animation indefinitely, or initial or inherit to inherit the value from the parent or set it to the initial value, respectively.
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes scale {
0% {
transform: translatex(0px)
}
50% {
transform: translatex(50px)
}
100% {
transform: translatex(70px)
}
}
.element {
width: 100px;
height: 100px;
animation: scale 2s ease-in-out infinite;
/* Animation lasts 2 seconds and repeats infinitely */
}
</style>
</head>
<body>
<img src="https://cdn.dribbble.com/users/3484830/screenshots/17005456/media/aa074e97198a6c0e52c347085f88a32a.gif" class="element">
</body>
</html>