Interface Animation

The Animation interface of the Web Animations API represents a single animation player and provides playback controls and a timeline for an animation node or source.

MDN Reference

interface Animation {
    currentTime: null | CSSNumberish;
    effect: null | AnimationEffect;
    finished: Promise<Animation>;
    id: string;
    oncancel: null | ((this: Animation, ev: AnimationPlaybackEvent) => any);
    onfinish: null | ((this: Animation, ev: AnimationPlaybackEvent) => any);
    onremove: null | ((this: Animation, ev: AnimationPlaybackEvent) => any);
    pending: boolean;
    playbackRate: number;
    playState: AnimationPlayState;
    ready: Promise<Animation>;
    replaceState: AnimationReplaceState;
    startTime: null | CSSNumberish;
    timeline: null | AnimationTimeline;
    addEventListener<K extends keyof AnimationEventMap>(
        type: K,
        listener: (this: Animation, ev: AnimationEventMap[K]) => any,
        options?: boolean | AddEventListenerOptions,
    ): void;
    addEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | AddEventListenerOptions,
    ): void;
    cancel(): void;
    commitStyles(): void;
    dispatchEvent(event: Event): boolean;
    finish(): void;
    pause(): void;
    persist(): void;
    play(): void;
    removeEventListener<K extends keyof AnimationEventMap>(
        type: K,
        listener: (this: Animation, ev: AnimationEventMap[K]) => any,
        options?: boolean | EventListenerOptions,
    ): void;
    removeEventListener(
        type: string,
        listener: EventListenerOrEventListenerObject,
        options?: boolean | EventListenerOptions,
    ): void;
    reverse(): void;
    updatePlaybackRate(playbackRate: number): void;
}

Hierarchy

EventTarget
- Animation

Properties

currentTime

currentTime: null | CSSNumberish

The Animation.currentTime property of the Web Animations API returns and sets the current time value of the animation in milliseconds, whether running or paused.

MDN Reference

effect

effect: null | AnimationEffect

The Animation.effect property of the Web Animations API gets and sets the target effect of an animation.

MDN Reference

`Readonly`finished

finished: Promise<Animation>

The Animation.finished read-only property of the Web Animations API returns a Promise which resolves once the animation has finished playing.

MDN Reference

id

id: string

The Animation.id property of the Web Animations API returns or sets a string used to identify the animation.

MDN Reference

oncancel

oncancel: null | ((this: Animation, ev: AnimationPlaybackEvent) => any)

MDN Reference

onfinish

onfinish: null | ((this: Animation, ev: AnimationPlaybackEvent) => any)

MDN Reference

onremove

onremove: null | ((this: Animation, ev: AnimationPlaybackEvent) => any)

MDN Reference

`Readonly`pending

pending: boolean

The read-only Animation.pending property of the Web Animations API indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.

MDN Reference

playbackRate

playbackRate: number

The Animation.playbackRate property of the Web Animations API returns or sets the playback rate of the animation.

MDN Reference

`Readonly`playState

playState: AnimationPlayState

The read-only Animation.playState property of the Web Animations API returns an enumerated value describing the playback state of an animation.

MDN Reference

`Readonly`ready

ready: Promise<Animation>

The read-only Animation.ready property of the Web Animations API returns a Promise which resolves when the animation is ready to play.

MDN Reference

`Readonly`replaceState

replaceState: AnimationReplaceState

The read-only Animation.replaceState property of the Web Animations API indicates whether the animation has been removed by the browser automatically after being replaced by another animation.

MDN Reference

startTime

startTime: null | CSSNumberish

The Animation.startTime property of the Animation interface is a double-precision floating-point value which indicates the scheduled time when an animation's playback should begin.

MDN Reference

timeline

timeline: null | AnimationTimeline

The Animation.timeline property of the Animation interface returns or sets the AnimationTimeline associated with this animation.

MDN Reference

Methods

addEventListener

addEventListener<K extends keyof AnimationEventMap>(
    type: K,
    listener: (this: Animation, ev: AnimationEventMap[K]) => any,
    options?: boolean | AddEventListenerOptions,
): void
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

MDN Reference
Type Parameters
- K extends keyof AnimationEventMap
Parameters
- type: K
- listener: (this: Animation, ev: AnimationEventMap[K]) => any
- Optionaloptions: boolean | AddEventListenerOptions
Returns void
Overrides EventTarget.addEventListener
addEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | AddEventListenerOptions,
): void
The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

MDN Reference
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- Optionaloptions: boolean | AddEventListenerOptions
Returns void
Overrides EventTarget.addEventListener

cancel

cancel(): void
The Web Animations API's cancel() method of the Animation interface clears all KeyframeEffects caused by this animation and aborts its playback.

MDN Reference

Returns void

commitStyles

commitStyles(): void
The commitStyles() method of the Web Animations API's Animation interface writes the computed values of the animation's current styles into its target element's style attribute.

MDN Reference

Returns void

dispatchEvent

dispatchEvent(event: Event): boolean
The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.

MDN Reference
Parameters
- event: Event
Returns boolean
Inherited from EventTarget.dispatchEvent

finish

finish(): void
The finish() method of the Web Animations API's Animation Interface sets the current playback time to the end of the animation corresponding to the current playback direction.

MDN Reference

Returns void

pause

pause(): void
The pause() method of the Web Animations API's Animation interface suspends playback of the animation.

MDN Reference

Returns void

persist

persist(): void
The persist() method of the Web Animations API's Animation interface explicitly persists an animation, preventing it from being automatically removed when it is replaced by another animation.

MDN Reference

Returns void

play

play(): void
The play() method of the Web Animations API's Animation Interface starts or resumes playing of an animation.

MDN Reference

Returns void

removeEventListener

removeEventListener<K extends keyof AnimationEventMap>(
    type: K,
    listener: (this: Animation, ev: AnimationEventMap[K]) => any,
    options?: boolean | EventListenerOptions,
): void
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

MDN Reference
Type Parameters
- K extends keyof AnimationEventMap
Parameters
- type: K
- listener: (this: Animation, ev: AnimationEventMap[K]) => any
- Optionaloptions: boolean | EventListenerOptions
Returns void
Overrides EventTarget.removeEventListener
removeEventListener(
    type: string,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions,
): void
The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

MDN Reference
Parameters
- type: string
- listener: EventListenerOrEventListenerObject
- Optionaloptions: boolean | EventListenerOptions
Returns void
Overrides EventTarget.removeEventListener

reverse

reverse(): void
The Animation.reverse() method of the Animation Interface reverses the playback direction, meaning the animation ends at its beginning.

MDN Reference

Returns void

updatePlaybackRate

updatePlaybackRate(playbackRate: number): void
The updatePlaybackRate() method of the Web Animations API's synchronizing its playback position.

MDN Reference
Parameters
- playbackRate: number
Returns void

Interface Animation

Hierarchy

Index

Properties

Methods

Properties

currentTime

effect

Readonlyfinished

id

oncancel

onfinish

onremove

Readonlypending

playbackRate

ReadonlyplayState

Readonlyready

ReadonlyreplaceState

startTime

timeline

Methods

addEventListener

Type Parameters

Parameters

Returns void

Parameters

Returns void

cancel

Returns void

commitStyles

Returns void

dispatchEvent

Parameters

Returns boolean

finish

Returns void

pause

Returns void

persist

Returns void

play

Returns void

removeEventListener

Type Parameters

Parameters

Returns void

Parameters

Returns void

reverse

Returns void

updatePlaybackRate

Parameters

Returns void

Settings

On This Page

`Readonly`finished

`Readonly`pending

`Readonly`playState

`Readonly`ready

`Readonly`replaceState