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 animation Property
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 −
Updated on: 15-Feb-2021
54 Views
Advertisements