Animation Class

An animation: plays an animation effect on a timeline (https://drafts.csswg.org/web-animations-1/#animations).

public class Animation : EventTarget

Remarks

The pending play and pause tasks run when the event loop updates the rendering (the animation is then ready), and the finish, cancel and remove events are dispatched there (https://drafts.csswg.org/web-animations-1/#update-animations-and-send-events). An animation without timeline, or whose timeline is inactive (e.g. its document has no browsing context), stays pending.

See also

Inheritance
EventTarget Animation

Constructors

NameDescription
Animation(AnimationEffect?)Creates an animation of the effect on the timeline (https://drafts.csswg.org/web-animations-1/#dom-animation-animation): the default timeline of the document of the current global object.
Animation(AnimationEffect?, AnimationTimeline?)Creates an animation of the effect on the timeline (null for no timeline).

Animation overloads

Animation(AnimationEffect?)

Animation.cs

Creates an animation of the effect on the timeline (https://drafts.csswg.org/web-animations-1/#dom-animation-animation): the default timeline of the document of the current global object.

public Animation(AnimationEffect? effect = null)

Animation(AnimationEffect?, AnimationTimeline?)

Animation.cs

Creates an animation of the effect on the timeline (null for no timeline).

public Animation(AnimationEffect? effect, AnimationTimeline? timeline)

Properties

NameDescription
CurrentTimeGets or sets the current time of the animation, in milliseconds (https://drafts.csswg.org/web-animations-1/#dom-animation-currenttime).
EffectGets or sets the effect of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-effect).
FinishedGets the promise resolved when the animation finishes (https://drafts.csswg.org/web-animations-1/#dom-animation-finished).
IdGets or sets the identifier of the animation.
OnCancelGets or sets the event handler of the cancel event.
OnFinishGets or sets the event handler of the finish event.
OnRemoveGets or sets the event handler of the remove event.
OverallProgressGets the overall progress of the animation, from 0 to 1 (https://drafts.csswg.org/web-animations-2/#dom-animation-overallprogress).
PendingGets whether the animation has a pending play or pause task (https://drafts.csswg.org/web-animations-1/#dom-animation-pending).
PlayStateGets the play state of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-playstate).
PlaybackRateGets or sets the playback rate (https://drafts.csswg.org/web-animations-1/#dom-animation-playbackrate).
RangeEndGets or sets the end of the animation attachment range (https://drafts.csswg.org/web-animations-2/#dom-animation-rangeend): "normal" or a TimelineRangeOffset. A string is parsed as an animation-range-end value.
RangeStartGets or sets the start of the animation attachment range (https://drafts.csswg.org/web-animations-2/#dom-animation-rangestart): "normal" or a TimelineRangeOffset. A string is parsed as an animation-range-start value.
ReadyGets the promise resolved when the animation is ready to play (https://drafts.csswg.org/web-animations-1/#dom-animation-ready).
ReplaceStateGets the replace state of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-replacestate).
StartTimeGets or sets the start time of the animation, in milliseconds (https://drafts.csswg.org/web-animations-1/#dom-animation-starttime).
TimelineGets or sets the timeline of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-timeline).

CurrentTime

Animation.cs

Gets or sets the current time of the animation, in milliseconds (https://drafts.csswg.org/web-animations-1/#dom-animation-currenttime).

public CssNumberish? CurrentTime { get; set; }

Gets or sets the effect of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-effect).

public AnimationEffect? Effect { get; set; }

Finished

Animation.cs

Gets the promise resolved when the animation finishes (https://drafts.csswg.org/web-animations-1/#dom-animation-finished).

public Task<Animation> Finished { get; }

Gets or sets the identifier of the animation.

public string Id { get; set; }

OnCancel

Animation.cs

Gets or sets the event handler of the cancel event.

public Action<Event>? OnCancel { get; set; }

OnFinish

Animation.cs

Gets or sets the event handler of the finish event.

public Action<Event>? OnFinish { get; set; }

OnRemove

Animation.cs

Gets or sets the event handler of the remove event.

public Action<Event>? OnRemove { get; set; }

OverallProgress

Animation.cs

Gets the overall progress of the animation, from 0 to 1 (https://drafts.csswg.org/web-animations-2/#dom-animation-overallprogress).

public double? OverallProgress { get; }

Gets whether the animation has a pending play or pause task (https://drafts.csswg.org/web-animations-1/#dom-animation-pending).

public bool Pending { get; }

PlayState

Animation.cs

Gets the play state of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-playstate).

public AnimationPlayState PlayState { get; }

PlaybackRate

Animation.cs

Gets or sets the playback rate (https://drafts.csswg.org/web-animations-1/#dom-animation-playbackrate).

public double PlaybackRate { get; set; }

RangeEnd

Animation.cs

Gets or sets the end of the animation attachment range (https://drafts.csswg.org/web-animations-2/#dom-animation-rangeend): "normal" or a TimelineRangeOffset. A string is parsed as an animation-range-end value.

public TimelineRangeValue RangeEnd { get; set; }

RangeStart

Animation.cs

Gets or sets the start of the animation attachment range (https://drafts.csswg.org/web-animations-2/#dom-animation-rangestart): "normal" or a TimelineRangeOffset. A string is parsed as an animation-range-start value.

public TimelineRangeValue RangeStart { get; set; }

Gets the promise resolved when the animation is ready to play (https://drafts.csswg.org/web-animations-1/#dom-animation-ready).

public Task<Animation> Ready { get; }

ReplaceState

Animation.cs

Gets the replace state of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-replacestate).

public AnimationReplaceState ReplaceState { get; }

StartTime

Animation.cs

Gets or sets the start time of the animation, in milliseconds (https://drafts.csswg.org/web-animations-1/#dom-animation-starttime).

public CssNumberish? StartTime { get; set; }

Timeline

Animation.cs

Gets or sets the timeline of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-timeline).

public AnimationTimeline? Timeline { get; set; }

Methods

NameDescription
Cancel()Cancels the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-cancel).
CommitStyles()Writes the current values of the effect of the animation (and of the animations below it in the composite order) to the style attribute of its target (https://drafts.csswg.org/web-animations-1/#dom-animation-commitstyles).
Finish()Seeks the animation to the end of its effect (https://drafts.csswg.org/web-animations-1/#dom-animation-finish).
Pause()Pauses the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-pause).
Persist()Prevents the animation from being removed when it is replaced (https://drafts.csswg.org/web-animations-1/#dom-animation-persist).
Play()Plays or resumes the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-play).
Reverse()Reverses the playback direction of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-reverse).
UpdatePlaybackRate(double)Sets the playback rate without a jump of the current time, once the animation is ready (https://drafts.csswg.org/web-animations-1/#dom-animation-updateplaybackrate).

Cancel()

Animation.cs

Cancels the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-cancel).

public void Cancel()

Writes the current values of the effect of the animation (and of the animations below it in the composite order) to the style attribute of its target (https://drafts.csswg.org/web-animations-1/#dom-animation-commitstyles).

public void CommitStyles()

Exceptions

DomException
The target is a pseudo-element or an element without style attribute (NoModificationAllowedError), or it is not being rendered (InvalidStateError).

See also

Finish()

Animation.cs

Seeks the animation to the end of its effect (https://drafts.csswg.org/web-animations-1/#dom-animation-finish).

public void Finish()

Exceptions

DomException
The playback rate is 0, or the effect is infinite and the playback rate is positive (InvalidStateError).

See also

Pauses the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-pause).

public void Pause()

Exceptions

DomException
The current time is unresolved, the animation plays backwards and its effect is infinite (InvalidStateError).

See also

Persist()

Animation.cs

Prevents the animation from being removed when it is replaced (https://drafts.csswg.org/web-animations-1/#dom-animation-persist).

public void Persist()

Plays or resumes the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-play).

public void Play()

Exceptions

DomException
The animation plays backwards and its effect is infinite (InvalidStateError).

See also

Reverse()

Animation.cs

Reverses the playback direction of the animation (https://drafts.csswg.org/web-animations-1/#dom-animation-reverse).

public void Reverse()

Exceptions

DomException
The animation has no active timeline, or its effect is infinite (InvalidStateError).

See also

UpdatePlaybackRate(double)

Animation.cs

Sets the playback rate without a jump of the current time, once the animation is ready (https://drafts.csswg.org/web-animations-1/#dom-animation-updateplaybackrate).

public void UpdatePlaybackRate(double playbackRate)