HTML | DOM Style animation Property
The style animation property makes it possible to animate transitions from one CSS style to another CSS style. It configures the timing, delay, duration and other details of how the sequence of animation should progress. The animation contains two components, one is CSS describing the component and another is a set of keyframes that indicate the start and end states of styles.
Syntax:
- It is used to return the animation property
object.style.animation
- It is used to set the animation property
object.style.animation="name duration timingFunction delay iterationCount direction fillMode playState"
Property Values
- animationName: Describes the name of the keyframe attached to the selector.
- animationDuration: Describes the time how long an animation takes place.
- animationTimingFunction: Describes the speed of the animation.
- animationDelay: Describes the delay before the animation will start.
- animationIterationCount: Describes the number of times an animation takes place.
- animationDirection: Describes if animation should play in reverse on alternate cycles.
- animationFillMode: Describes what values to apply when animation ends.
- animationPlayState: Describes whether an animation is running or paused.
Return Values: It returns a string value which representing the animation property of an element.
Example 1:
HTML
<!DOCTYPE html><html><head> <style> #GFG { width: 90px; height: 90px; background: green; color: white; position: relative; text-align: center; /* -webkit- is used for safari browser */ -webkit-animation: GFG_Move_1 1s infinite; animation: GFG_Move_1 1s infinite; } /* For Opera, Chrome and Safari browser */ @-webkit-keyframes GFG_Move_1 { from { left: 250px; } to { left: 500px; } } /* For Opera, Chrome and Safari browser */ @-webkit-keyframes GFG_Move_2 { from { left: 350px; top: 0px; } to { left: 350px; top: 200px; } } @keyframes GFG_Move_1 { from { left: 250px; } to { left: 500px; } } @keyframes GFG_Move_2 { from { left: 350px; top: 0px; } to { left: 350px; top: 200px; } } </style></head><body align="center"> <button onclick="myGeeks()"> Change Animation </button> <p> Click on button to change the animation. </p> <script> function myGeeks() { /* This code run on safari browser */ document.getElementById("GFG").style.WebkitAnimation = "GFG_Move_2 4s 2"; document.getElementById("GFG").style.animation = "GFG_Move_2 4s 2"; } </script> <div id="GFG">GFG</div></body></html> |
Output:
- Before Click on the button: The div moves horizontally
- After Click on the button: The div moves vertically
Example 2:
HTML
<!DOCTYPE html><html><head> <title> HTML DOM Style animation Property </title> <style> #GFG { width: 90px; height: 90px; background: green; position: relative; color: white; text-align: center; /* /* For Opera, Chrome, Safari*/ */ -webkit-animation: GFG_Move_1 1s infinite; animation: GFG_Move_1 1s infinite; } /* For Opera, Chrome, Safari*/ @-webkit-keyframes GFG_Move_1 { from { left: 0px; } to { left: 90px; } } /* For Opera, Chrome, Safari */ @-webkit-keyframes GFG_Move_2 { from { top: 0px; background: green; width: 100px; } to { top: 200px; background: yellow; width: 150px; height: 150px; } } @keyframes GFG_Move_1 { from { left: 0px; } to { left: 95px; } } @keyframes GFG_Move_2 { from { top: 0px; background: green; width: 100px; } to { top: 200px; background: yellow; width: 150px; height: 150px; } } </style></head><body align="center"> <button onclick="myGeeks()"> Change Animation </button> <p> Click on button to change the animation. </p> <script> function myGeeks() { /* For Opera, Chrome, Safari */ document.getElementById("GFG").style.WebkitAnimation = "GFG_Move_2 4s 2" document.getElementById("GFG").style.animation = "GFG_Move_2 4s 2"; } </script> <div id="GFG">GFG</div></body></html> |
Output:
- Before Click on the button:
- After click on the button:
Supported Browsers: The browser supported by Style animation Property are listed below:
- Google Chrome 43 and above
- Edge 12 and above
- Internet Explorer 10.0 and above
- Mozilla Firefox 16.0 and above
- Opera 30.0 and above
- Safari 9.0 and above
Please Login to comment...