animate()

Introduction

Use animate() to set a CSS Animation on UI elements.

Syntax

animate(keyframes, options);

Parameter

keyframes

An array consisting of objects that contain properties and values of multiple keyframes.

function controlAnimation(ele: MainThread.Element) {
  'main thread'
  ele.animate(
    [
      {
        // from
        opacity: 0,
        color: '#fff',
      },
      {
        // to
        opacity: 1,
        color: '#000',
      },
    ],
    2000,
  );
}

Assign a timing-function for each keyframe to control the animation's speed.

function controlAnimation(ele: MainThread.Element) {
  'main thread'
  ele.animate(
    [
      {
        // from
        opacity: 0,
        color: '#fff',
        'animation-timing-function': 'linear',
      },
      {
        // to
        opacity: 1,
        color: '#000',
        'animation-timing-function': 'ease-in',
      },
    ],
    2000,
  );
}

options

An object that contains one or more properties:

Key	Value Type	Optional	Description	Default Value
duration	Number	optional	The length of time for the animation to run.	0
delay	Number	optional	The length of time to wait before starting the animation.	0
iterations	Number	optional	The number of times the animation should repeat. You can set this to `Infinity` to make the animation loop indefinitely.	1
direction	String	optional	Whether the animation runs forwards (`normal`), backwards (`reverse`), switches direction after each iteration (`alternate`), or runs backwards and switches direction after each iteration (`alternate-reverse`). Defaults to `"normal"`.	`"normal"`
easing	String	optional	The rate of the animation's change over time. Accepts an timing-function, such as `"linear"`, `"ease-in"`, or `"cubic-bezier(0.42, 0, 0.58, 1)"`. Defaults to "linear".	`"linear"`
fill	String	optional	Dictates whether the animation's effects should be reflected by the element(s) prior to playing ("backwards"), retained after the animation has completed playing ("forwards"), or both. Defaults to "none".	`"none"`
name	String	optional	The name of the animation, which can be used to uniquely identify it. This name appears in the animation events parameters and is typically used to determine if a particular animation event is the one you're interested in.	An internal unique ID.
play-state	String	optional	Animation motion state, which defines whether an animation is running or paused, accepts an animation-play-state	running

Note:

If no name is specified, a unique id is generated incrementally.

Return Value

Returns an Animation object. The Animation object has the following methods:

Method Name	Description
`Animation.cancel()`	Cancels the animation and triggers the `animation cancel` event.
`Animation.pause()`	Pauses the animation.
`Animation.play()`	Resumes the animation.

Example

function controlAnimation(ele: MainThread.Element) {
  'main thread'
  let ani = ele.animate(
    [
      {
        'background-color': 'blue',
        transform: 'translateX(100px) translateY(300px) rotate(360deg)',
      },
      {
        'background-color': 'red',
        transform: 'translateX(0px) translateY(600px) rotate(0deg)',
      },
    ],
    {
      duration: 3000,
      delay: 1000,
      iterations: Infinity,
      direction: 'alternate',
      easing: 'ease-in-out',
      fill: 'both',
    },
  );

  ani.pause();
  ani.play();
  ani.cancel();
}

Animation Event

The events for the animate() API are the same as the animation events for CSS animations.

Compatibility

LCD tables only load in the browser

#animate()

#Introduction

#Syntax

#Parameter

#keyframes

#options

#Return Value

#Example

#Animation Event

#See also

#Compatibility