Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

animate()

Introduction

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

Syntax

animate(keyframes, options);

Parameter

keyframes

  1. 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,
  );
}
  1. 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:

KeyValue TypeOptionalDescriptionDefault Value
durationNumberoptionalThe length of time for the animation to run.0
delayNumberoptionalThe length of time to wait before starting the animation.0
iterationsNumberoptionalThe number of times the animation should repeat. You can set this to Infinity to make the animation loop indefinitely.1
directionStringoptionalWhether 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"
easingStringoptionalThe 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"
fillStringoptionalDictates 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"
nameStringoptionalThe 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-stateStringoptionalAnimation motion state, which defines whether an animation is running or paused, accepts an animation-play-staterunning
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 NameDescription
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.

See also

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.