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 and 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 the animation should play in reverse on alternate cycles.
- animationFillMode: Describes what values to apply when the animation ends.
- animationPlayState: Describes whether an animation is running or paused.
Return Values: It returns a string value that represents the animation property of an element.
Example 1: In this example, we will use DOM Style animation Property
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>
<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:
Example 2: In this example, we will use DOM Style animation Property
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>
<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:
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