Table of Contents

Class Animation

Namespace
CSharpToJavaScript.APIs.JS
Assembly
CSharpToJavaScript.dll

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.

[Value("Animation")]
public class Animation : EventTarget
Inheritance
Animation
Derived
Inherited Members

Remarks

-Web Animations API

See also on MDN

Constructors

Animation() 

public Animation()

Animation(AnimationEffect?, AnimationTimeline?)

The Animation() constructor of the Web Animations API returns a new Animation object instance.

public Animation(AnimationEffect? effect = null, AnimationTimeline? timeline = null)

Parameters

effect AnimationEffect
timeline AnimationTimeline

Remarks

-Web Animations API
-Animation

See also on MDN

Properties

CurrentTime

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.

[Value("currentTime")]
public Union13? CurrentTime { get; set; }

Property Value

Union13?

A number representing the current time in milliseconds, or null to deactivate the animation.

Remarks

If the animation lacks a AnimationTimeline, is inactive, or hasn't been played yet, currentTime's return value is null.

-Animation for other methods and properties you can use to control web page animation.
-StartTime for the time an animation is scheduled to start.
-Web Animations API

See also on MDN

Effect

The Animation.effect property of the Web Animations API gets and sets the target effect of an animation. The target effect may be either an effect object of a type based on AnimationEffect, such as KeyframeEffect, or null.

[Value("effect")]
public AnimationEffect? Effect { get; set; }

Property Value

AnimationEffect

A AnimationEffect object describing the target animation effect for the animation, or null to indicate no active effect.

Remarks

-Web Animations API
-AnimationEffect
-Animation

See also on MDN

Finished

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

[Value("finished")]
public Task<Animation> Finished { get; }

Property Value

Task<Animation>

A Promise object which will resolve once the animation has finished running.

Remarks

NOTE

Every time the animation leaves the finished play state (that is, when it starts playing again), a new Promise is created for this property. The new Promise will resolve once the new animation sequence has completed.

-KeyframeEffect
-Web Animations API
-Animation

See also on MDN

Id

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

[Value("id")]
public string Id { get; set; }

Property Value

string

A string which can be used to identify the animation, or null if the animation has no id.

Remarks

-KeyframeEffect
-Web Animations API
-Animation

See also on MDN

Oncancel 

[Value("oncancel")]
public EventHandlerNonNull Oncancel { get; set; }

Property Value

EventHandlerNonNull

Onfinish 

[Value("onfinish")]
public EventHandlerNonNull Onfinish { get; set; }

Property Value

EventHandlerNonNull

Onremove 

[Value("onremove")]
public EventHandlerNonNull Onremove { get; set; }

Property Value

EventHandlerNonNull

OverallProgress

The overallProgress read-only property of the Animation interface returns a number between 0 and 1 indicating the animation&apos;s overall progress towards its finished state. This is the overall progress across all of the animation&apos;s iterations, not each individual iteration.

[Value("overallProgress")]
public Number? OverallProgress { get; }

Property Value

Number

A number between 0 and 1, or null if the animation lacks a timeline, is inactive or hasn't been played yet, or if its AnimationcurrentTime is set to a non-time value.If the animation&apos;s iterations property is set to Infinity, or if its AnimationcurrentTime is set to a negative value, overallProgress will return 0.If the animation&apos;s duration is set to 0, overallProgress will return 1.

Remarks

overallProgress works consistently across all animations, regardless of the type of AnimationTimeline.

-Animation for other methods and properties you can use to control web page animation.
-Web Animations API

See also on MDN

Pending

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.

[Value("pending")]
public bool Pending { get; }

Property Value

bool
true if the animation is pending, false otherwise.

Remarks

-Animation for other methods and properties you can use to control web page animation.
-Web Animations API

See also on MDN

PlayState

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

[Value("playState")]
public AnimationPlayState PlayState { get; }

Property Value

AnimationPlayState

Previously, Web Animations defined a pending value to indicate that some asynchronous operation such as initiating playback was yet to complete. This is now indicated by the separate Pending property.

Remarks

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.

See also on MDN

PlaybackRate

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

[Value("playbackRate")]
public Number PlaybackRate { get; set; }

Property Value

Number

Takes a number that can be 0, negative, or positive. Negative values reverse the animation. The value is a scaling factor, so for example a value of 2 would double the playback rate.

NOTE
Setting an animation&apos;s playbackRate to 0 effectively pauses the animation (however, its PlayState does not necessarily become paused).

Remarks

Animations have a playback rate that provides a scaling factor from the rate of change of the animation's DocumentTimeline time values to the animation's current time. The playback rate is initially 1.

-Web Animations API
-Animation

See also on MDN

Ready

The read-only Animation.ready property of the Web Animations API returns a Promise which resolves when the animation is ready to play. A new promise is created every time the animation enters the &quot;pending&quot; play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again.

[Value("ready")]
public Task<Animation> Ready { get; }

Property Value

Task<Animation>

A Promise which resolves when the animation is ready to be played. You'll typically use a construct similar to this when using the ready promise:

Remarks

NOTE

Since the same Promise is used for both pending play and pending pause requests, authors are advised to check the state of the animation when the promise is resolved.

-Web Animations API
-Animation
-PlayState

See also on MDN

ReplaceState

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.

[Value("replaceState")]
public AnimationReplaceState ReplaceState { get; }

Property Value

AnimationReplaceState

A string that represents the replace state of the animation. The value can be one of:

Remarks

-Web Animations API
-Animation
-Animation.Remove event
-Persist()

See also on MDN

StartTime

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.

[Value("startTime")]
public Union13? StartTime { get; set; }

Property Value

Union13?

A floating-point number representing the current time in milliseconds, or null if no time is set. You can read this value to determine what the start time is currently set at, and you can change this value to make the animation start at a different time.

Remarks

An animation&apos;s start time is the time value of its DocumentTimeline when its target KeyframeEffect is scheduled to begin playback. An animation's start time is initially unresolved (meaning that it&apos;s null because it has no value).

-Web Animations API
-Animation
-CurrentTime for the current time of the animation.

See also on MDN

Timeline

The Animation.timeline property of the Animation interface returns or sets the AnimationTimeline associated with this animation. A timeline is a source of time values for synchronization purposes, and is an AnimationTimeline-based object. By default, the animation's timeline and the Document's timeline are the same.

[Value("timeline")]
public AnimationTimeline? Timeline { get; set; }

Property Value

AnimationTimeline

A {{domxref(&quot;AnimationTimeline&quot;, &quot;timeline object&quot;, &quot;&quot;, 1)}} to use as the timing source for the animation, or null to use the default, which is the Document's timeline.

Remarks

-Web Animations API
-Animation
-AnimationTimeline the parent object all timelines inherit from.
-DocumentTimeline the only kind of timeline object available at this time.
-Timeline is the default timeline all animations are assigned.

See also on MDN

Methods

Cancel()

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

[Value("cancel")]
public GlobalObject.Undefined Cancel()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

NOTE

When an animation is cancelled, its StartTime and CurrentTime are set to null.

-Web Animations API
-KeyframeEffect
-Animation
-PlayState
-Finished returns the promise this action will reject if the animation's playState is not &quot;idle&quot;.

See also on MDN

CommitStyles()

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

[Value("commitStyles")]
public GlobalObject.Undefined CommitStyles()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

It is primarily used to write the styles for the final state of an animation into the target element, so that the styling persists after the animation ends.

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.

See also on MDN

Finish()

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.

[Value("finish")]
public GlobalObject.Undefined Finish()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

That is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its Reverse() method called), it sets the playback time to 0.

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.
-Play() to play an animation forward.
-Reverse() to play an animation backward.

See also on MDN

Pause()

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

[Value("pause")]
public GlobalObject.Undefined Pause()

Returns

GlobalObject.Undefined

None.

Remarks

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.
-Reverse() to play an animation backwards.
-Finish() to finish an animation.
-Cancel() to cancel an animation.

See also on MDN

Persist()

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.

[Value("persist")]
public GlobalObject.Undefined Persist()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.
-ReplaceState
-Animation.Remove event

See also on MDN

Play()

The play() method of the Web Animations API's Animation Interface starts or resumes playing of an animation. If the animation is finished, calling play() restarts the animation, playing it from the beginning.

[Value("play")]
public GlobalObject.Undefined Play()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.
-Pause() to pause an animation.
-Reverse() to play an animation backwards.
-Finish() to finish an animation.
-Cancel() to cancel an animation.

See also on MDN

Reverse()

The Animation.reverse() method of the Animation Interface reverses the playback direction, meaning the animation ends at its beginning. If called on an unplayed animation, the whole animation is played backwards. If called on a paused animation, the animation will continue in reverse.

[Value("reverse")]
public GlobalObject.Undefined Reverse()

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-Web Animations API
-Animation for other methods and properties you can use to control web page animation.
-Pause() to pause an animation.
-Play() to move an animation forward.

See also on MDN

UpdatePlaybackRate(Number)

The updatePlaybackRate() method of the Web Animations API&apos;s
Animation Interface sets the speed of an animation after first
synchronizing its playback position.

[Value("updatePlaybackRate")]
public GlobalObject.Undefined UpdatePlaybackRate(Number playbackRate)

Parameters

playbackRate Number

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

In some cases, an animation may run on a separate thread or process and will continue
updating even while long-running JavaScript delays the main thread. In such a case,
setting the PlaybackRate on the animation
directly may cause the animation&apos;s playback position to jump since its playback
position on the main thread may have drifted from the playback position where it is
currently running.

updatePlaybackRate() is an asynchronous method that sets the speed of an
animation after synchronizing with its current playback position, ensuring that the
resulting change in speed does not produce a sharp jump. After calling
updatePlaybackRate() the animation's PlaybackRate is not immediately updated.
It will be updated once the animation's Ready promise is resolved.

-Web Animations API
-PlaybackRate — read back the current playback rate or set
it in a synchronous manner.
-Reverse() — invert the playback rate and restart playback
if necessary.
-Animation — contains other methods and properties you can use to
control web page animation.

See also on MDN

Edit this page