Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Parameters
keyframes Either an array of keyframe objects, or a keyframe object whose properties are arrays of values to iterate over. See Keyframe Formats for more details. options Either an integer representing the animation's duration (in milliseconds), or an Object containing one or more timing properties described in the KeyframeEffect() options parameter and/or the following options: id Optional A property unique to animate(): A string with which to reference the animation. rangeEnd Optional Specifies the end of an animation's attachment range along its timeline, i.e. where along the timeline an animation will end. The JavaScript equivalent of the CSS animation-range-end property. rangeEnd can take several different value types, as follows: •A string that can be normal (meaning no change to the animation's attachment range), a CSS <length-percentage> representing an offset, a <timeline-range-name>, or a <timeline-range-name> with a <length-percentage> following it. For example: "normal" "entry" "cover 100%" See animation-range for a detailed description of the available values. Also check out the View Timeline Ranges Visualizer, which shows exactly what the different values mean in an easy visual format. •An object containing rangeName (a string) and offset (a CSSNumericValue) properties representing a <timeline-range-name> and <length-percentage>, as described in the previous bullet. For example: •A CSSNumericValue representing an offset, for example:

Rotating and scaling
In this example we use the animate() method to rotate and scale an element.
Down the Rabbit Hole demo