This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The Animation.play()
method of the Animation
Interface starts or resumes playing of an animation. If the animation is finished, calling play()
starts it playing from the beginning.
Syntax
animation.play();
Parameters
None.
Returns
Void.
Example
In the Growing/Shrinking Alice Game example, clicking or tapping the cake causes Alice's growing animation (aliceChange
) to play forward, causing her to get bigger, as well as triggering the cake's animation. Two Animation.play()
s, one EventListener
:
// The cake has its own animation: var nommingCake = document.getElementById('eat-me_sprite').animate( [ { transform: 'translateY(0)' }, { transform: 'translateY(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: aliceChange.effect.timing.duration / 2 }); // Pause the cake's animation so it doesn't play immediately. nommingCake.pause(); // This function will play when ever a user clicks or taps var growAlice = function() { // Play Alice's animation. aliceChange.play(); // Play the cake's animation. nommingCake.play(); } // When a user holds their mouse down or taps, call growAlice to make all the animations play. cake.addEventListener("mousedown", growAlice, false); cake.addEventListener("touchstart", growAlice, false);
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'play()' in that specification. |
Working Draft |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 39.0 | 48 (48) | No support | No support | No support |
Feature | Android | Android Webview | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | No support | 39.0 | 48.0 (48) | No support | No support | No support | 39.0 |
See also
- Web Animations API
Animation
for other methods and properties you can use to control web page animation.Animation.pause()
to pause an animation.Animation.reverse()
to play an animation backwards.Animation.finish()
to finish an animation.Animation.cancel()
to cancel an animation.
Document Tags and Contributors
Tags:
Contributors to this page:
birtles,
jpmedley,
chrisdavidmills,
rachelnabors,
Jeremie,
teoli,
kscarfone
Last updated by:
birtles,