animate() method in javascript
animate() method is used to add animation effects to the element and play it.
Syntax
var animation = element.animate([{FROM CSS properties}, {TO CSS properties}], options) ;
- FROM CSS properties - It denotes the type of CSS property which should be used to start the animation.
- TO CSS properties - It denotes the type of CSS property which should be used to end the animation.
- options - It is used to denote animation duration related properties, some of the values used are given below.
- delay - It is used to set the delay for the animation to start. It is represented in milliseconds.
- direction - It is used to set the direction for the animation, if the object moves. It is represented in milliseconds.
- duration - It is used to set the total duration for in which the animation must run before closing.
- easing - It is used to set the rate of change in animation.
- endDelay - It is used to set the delay at the end of the animation. It is represented in milliseconds.
- fill - It is used to set how the element should look when the animation is not running.
- iterationStart - It is used to set when the animation should start during the iteration.
- iterations - It is used to set the number of times the animation should repeat.
Example Explanation
- In the above example, text color transform from blue color to red color in 5 seconds (5000 milliseconds).
- color: 'blue' - It denotes the color from which the text must start animation.
- color: 'red' - It denotes the final color of the text after animation.
- duration: 5000 - It denotes the total duration within which the animation must be finished.
Example Explanation
- In the above example, element rotates 360 degree within 5 seconds (5000 milliseconds).
- rotate(0deg) - It denotes the starting angle before the rotation begins.
- rotate(360deg) - It denotes the ending angle at which the rotation ends.
- duration: 5000 - It denotes the total duration within which the animation must be finished.
Example Explanation
- In the above example, element is moved from one position to another within 5 seconds (5000 milliseconds).
- translate(0px,0px) - It denotes the starting position of the element.
- translate(100px,100px) - It denotes the final position of the element.
- duration: 5000 - It denotes the total duration within which the animation must be finished.
Example Explanation
- In the above example, element is resized to a specific size within 5 seconds (5000 milliseconds).
- scale(1,1) - It denotes the initial size of the element.
- scale(2,2) - It denotes the final size of the element.
- duration: 5000 - It denotes the total duration within which the animation must be finished.
Example Explanation
- In the above example, element is skewed (slanting) from one position to another within 5 seconds (5000 milliseconds).
- scale(1,1) - It denotes the initial position of the element.
- scale(2,2) - It denotes the final position of the element.
- duration: 5000 - It denotes the total duration within which the animation must be finished.