animate() in javascript

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 1 - Transform text color using animate() method

Try Yourself

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 2 - Rotate the element using animate() method

Try Yourself

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 3 - Move the element around the screen using animate() method

Try Yourself

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 4 - Resizing an element using animate() method

Try Yourself

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 5 - Skewing an element using animate() method

Try Yourself

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.