Animation: currentTime property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

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

If the animation lacks atimeline, is inactive, or hasn't been played yet,currentTime's return value isnull.

Value

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

In theDrink Me/Eat Me game, Alice's height is animated so it can go from small to large or large to small. At the start of the game, her height is set between the two extremes by setting her animation'scurrentTime to half herKeyframeEffect's duration:

aliceChange.currentTime = aliceChange.effect.timing.duration / 2;

A more generic means of seeking to the 50% mark of an animation would be:

animation.currentTime =  animation.effect.getComputedTiming().delay +  animation.effect.getComputedTiming().activeDuration / 2;

Reduced time precision

To offer protection against timing attacks andfingerprinting, the precision ofanimation.currentTime might get rounded depending on browser settings. In Firefox, theprivacy.reduceTimerPrecision preference is enabled by default and defaults to 2ms. You can also enableprivacy.resistFingerprinting, in which case the precision will be 100ms or the value ofprivacy.resistFingerprinting.reduceTimerPrecision.microseconds, whichever is larger.

For example, with reduced time precision, the result ofanimation.currentTime will always be a multiple of 0.002, or a multiple of 0.1 (orprivacy.resistFingerprinting.reduceTimerPrecision.microseconds) withprivacy.resistFingerprinting enabled.

// reduced time precision (2ms) in Firefox 60animation.currentTime;// Might be:// 23.404// 24.192// 25.514// …// reduced time precision with `privacy.resistFingerprinting` enabledanimation.currentTime;// Might be:// 49.8// 50.6// 51.7// …