CSS allows us to animate transitions of elements’ properties. We use the animation property to define our desired styles. We can combine properties like animation-name, animation-duration, animation-iteration-count, etc. using the animation keyword.
Syntax
The syntax of animation property is as follows −
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Values
Following are the values −
| Value | Description |
|---|---|
| animation-name | For specifying the keyframe name to bind the selector to. |
| animation-duration | To specifiy the time duration of the animation(in seconds or milliseconds) for completion. |
| animation-timing-function | To specify the animation speed curve. |
| animation-delay | To specify some delay before the animation starts |
| animation-iteration-count | To specify the no of time an animation should be played |
| animation-direction | To indicate if the animation should or should not play in the alternate or reverse cycle. |
| animation-fill-mode | To specify the values that are applied by the animation outside the time it is executing |
| animation-play-state | To specify if the animation is currently paused or playing. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value. |
Example
Let us look at the example for the animation property −
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 5px;
height: 15px;
background-color: limegreen;
animation: demo 4s infinite;
}
@keyframes demo {
from {width: 5px; background-color: limegreen;}
to {width: 400px; background-color: darkgreen;}
}
@keyframes demo1 {
from {height: 5px; background-color: limegreen;}
to {height: 400px; background-color: darkgreen;}
}
</style>
<script>
function changeAnimation() {
document.getElementById("DIV1").style.animation = "demo1 4s 2";
}
</script>
</head>
<body>
<button onclick="changeAnimation()">CHANGE ANIMATION</button>
<p>Change the below animation by clicking the above button</p>
<div id="DIV1"></div>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE ANIMATION button, the animation will change −
