The animation-iteration-count property in CSS is used to specify the number of times an animation should play. It determines how many times the animation sequence will run from start to finish. This property is particularly useful when you want to control whether an animation runs just once, loops indefinitely, or runs a specific number of times.
Syntax
animation-iteration-count: value;
Values
1. number: A positive integer value specifies the number of times the animation should be played. For example, animation-iteration-count: 3; means the animation will play three times.
2. infinite: This keyword makes the animation loop infinitely. It will continue to play over and over again without stopping. For example, animation-iteration-count: infinite;.
animation-iteration-count.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animation Timing Function Example</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #f4f4f4; } .container { width: 80%; max-width: 800px; margin: 20px; } .box { width: 100px; height: 100px; margin: 20px 0; background-color: #4CAF50; animation-name: moveRight; animation-duration: 5s; animation-iteration-count: 3; } .linear { animation-timing-function: linear; } .ease { animation-timing-function: ease; } .ease-in { animation-timing-function: ease-in; } @keyframes moveRight { from { transform: translateX(0); } to { transform: translateX(500px); } } </style> </head> <body> <div class="container"> <div class="box linear">linear</div> <div class="box ease">ease</div> <div class="box ease-in">ease-in</div> </div> </body> </html>
No comments:
Post a Comment