- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style animationIterationCount Property
The animationIterationCount property is used for setting or getting the number of times the animation will play.
Syntax
Following is the syntax for −
Setting the animationIterationCount property −
object.style.animationIterationCount = "number|infinite|initial|inherit"
Values
Following are the values −
| Sr.No | Value & Description |
|---|---|
| 1 | number Numeric value indicating the number of times the animation should be played. It is set to 1 by default. |
| 2 | infinite This makes the animation to play infinitely. |
| 3 | initial For setting this property to initial value. |
| 4 | inherit To inherit the parent property value. |
Example
Let us look at an example for the animationIterationCount property −
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: black;
animation: shrink 3s;
animation-timing-function: ease;
animation-iteration-count: 1;
}
@keyframes shrink {
0% {
color: white;
letter-spacing: 1.8em;
}
100% {
color: magenta;
letter-spacing: 0.01em;
}
}
</style>
<script>
function IncreaseIteration(){
document.getElementById("PARA1").style.animationIterationCount=5;
document.getElementById("Sample").innerHTML="The animation Iteration count is now 5";
}
</script>
</head>
<body>
<p id="PARA1">Tellus elementum sagittis vitae et. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
<p>Click the below button to change how many times the above animation will run</p>
<button onclick="IncreaseIteration()">INCREASE COUNT</button>
<p id="Sample"></p>
</body>
</html>Output
This will produce the following output −
On clicking the COORDINATES button and clicking Allow on the “Know your location” popup −
Updated on: 15-Feb-2021
15 Views
Advertisements