Posted By
Bajarangi soft ,
Posted On 28-09-2020
1. animationName
2. animationDuration
3. animationTimingFunction
animationDelay
animationIterationCount
animationDirection
Syntax and Usage
Return the animation property: object.style.animation Set the animation property: object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Property Values
| Value | Description |
|---|---|
| animationName | Specifies the name of the keyframe you want to bind to the selector |
| animationDuration | Specifies how many seconds or milliseconds an animation takes to complete |
| animationTimingFunction | Specifies the speed curve of the animation |
| animationDelay | Specifies a delay before the animation will start |
| animationIterationCount | Specifies how many times an animation should be played |
| animationDirection | Specifies whether or not the animation should play in reverse on alternate cycles |
| animationFillMode | Specifies what values are applied by the animation outside the time it is executing |
| animationPlayState | Specifies whether the animation is running or paused |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Example(1)
The animationName property sets or returns a name for the @keyframes animation.
<button onclick="move()">Click it</button>
<script>
function move() {
document.getElementById("DIV").style.animationName = "myNEWmove";
}
</script>
Example(2)
The animationDuration property defines how many seconds or milliseconds an animation takes to complete one cycle.
<button onclick="move()">Click it</button>
<script>
function move() {
document.getElementById("DIV").style.animationName = "myNEWmove";
}
</script>
Example(3)
The animationTimingFunction specifies the speed curve of the animation.
<button onclick="move()">Click it</button>
<div id="DIV"></div>
<script>
function move() {
document.getElementById("DIV").style.animationTimingFunction = "linear";
}
</script>
Example(4)
The animationDelay property defines when the animation will start.
<button class="btn btn-primary" onclick="move()">click it</button>
<div id="DIV"></div>
<script>
function move() {
document.getElementById("DIV").style.animationDelay = "3s";
}
</script>
In above example click the "Click it" button to reduce the delay of the animation to three seconds.
Example(5)
The animationIterationCount property sets or returns how many times an animation should be played.
<button onclick="move()">Click it</button>
<div id="DIV"></div>
<script>
function myFunction() {
document.getElementById("DIV").style.animationIterationCount = "infinite";
}
</script>
Example(6)
The animationDirection property sets or returns whether or not the animation should play in reverse on alternate cycles.
<button onclick="move()">Click it</button>
<div id="DIV"></div>
<script>
function move() {
document.getElementById("DIV").style.animationDirection = "reverse";
}
</script>
Complete code for animation delay in javascript
<!DOCTYPE html>
<html>
<head>
<title>How To Use CSS Animation In JavaScript With Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
h1{
color: red;
/*font-size: 90px;*/
}
#DIV {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-delay: 10s;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
</style>
<body>
<div class="container">
<br>
<div class="text-center">
<h1>Use CSS Animation In JavaScript</h1>
</div>
<br>
<div class="well">
<p>The animation will start 10 seconds after the page has finished loading.</p>
<p>Click the "Try it" button to reduce the delay of the animation to three seconds.</p>
<button class="btn btn-primary" onclick="move()">click it</button>
<p>Remember that the delay starts counting from when the page has finished loading, not from when you click the button.</p>
<p><strong>Note:</strong> The animationDelay property is not supported in Internet Explorer or Edge.</p>
<div id="DIV"></div>
</div>
</body>
</html>
<button class="btn btn-primary" onclick="move()">click it</button>
<div id="DIV"></div>
<script>
function move() {
document.getElementById("DIV").style.animationDelay = "3s";
}
</script>