Luet tämän sisällön englanninkielistä versiota, koska tälle sisällölle ei ole vielä käännöstä. Auta meitä kääntämään tämä artikkeli!
This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
Constructor
Animation()
- Creates a new
Animation
object instance.
Properties
Animation.currentTime
- The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a
timeline
, is inactive or hasn't been played yet, its value isnull
.
Animation.effect
- Gets and sets the
AnimationEffectReadOnly
associated with this animation. This will usually be aKeyframeEffect
object. Animation.finished
Read only- Returns the current finished Promise for this animation.
Animation.id
- Gets and sets the
String
used to identify the animation. Animation.pending
Read only- Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
Animation.playState
Read only- Returns an enumerated value describing the playback state of an animation.
Animation.playbackRate
- Gets or sets the playback rate of the animation.
Animation.ready
Read only- Returns the current ready Promise for this animation.
Animation.startTime
- Gets or sets the scheduled time when an animation's playback should begin.
Animation.timeline
- Gets or sets the
timeline
associated with this animation.
Event handlers
Animation.oncancel
- Gets and sets the event handler for the
cancel
event. Animation.onfinish
- Gets and sets the event handler for the
finish
event.
Methods
Animation.cancel()
- Clears all
keyframeEffects
caused by this animation and aborts its playback.
Animation.finish()
- Seeks either end of an animation, depending on whether the animation is playing or reversing.
Animation.pause()
- Suspends playing of an animation.
Animation.play()
- Starts or resumes playing of an animation, or begins the animation again if it previously finished.
Animation.reverse()
- Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.
Animation.updatePlaybackRate()
- Sets the speed of an animation after first synchronizing its playback position.
Accessibility concerns
Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.
Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.
- Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
- An Introduction to the Reduced Motion Media Query | CSS-Tricks
- Responsive Design for Motion | WebKit
- MDN Understanding WCAG, Guideline 2.2 explanations
- Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
Specifications
Specification | Status | Comment |
---|---|---|
Web Animations The definition of 'Animation' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Animation | Chrome
Full support
44
| Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android
Full support
44
| Chrome Android
Full support
44
| Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
Animation() constructor | Chrome Full support 61 | Edge ? | Firefox
Full support
48
| IE No support No | Opera ? | Safari No support No | WebView Android Full support 61 | Chrome Android Full support 61 | Firefox Android
Full support
48
| Opera Android ? | Safari iOS No support No | Samsung Internet Android No support No |
cancel | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
currentTime | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
effect | Chrome No support No | Edge ? | Firefox
Full support
63
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
63
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
finish | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
finished | Chrome No support No | Edge ? | Firefox
Full support
63
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
63
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
id | Chrome Full support 50 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 37 | Safari No support No | WebView Android Full support 50 | Chrome Android Full support 50 | Firefox Android
Full support
48
| Opera Android Full support 37 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
oncancel | Chrome Full support 50 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 37 | Safari No support No | WebView Android Full support 50 | Chrome Android Full support 50 | Firefox Android
Full support
48
| Opera Android Full support 37 | Safari iOS No support No | Samsung Internet Android Full support 5.0 |
onfinish | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
pause | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
pending | Chrome No support No | Edge ? | Firefox
Full support
59
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
59
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
play | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
playbackRate | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
playState | Chrome
Full support
39
| Edge ? | Firefox
Full support
48
| IE No support No | Opera
Full support
26
| Safari No support No | WebView Android
Full support
39
| Chrome Android
Full support
39
| Firefox Android
Full support
48
| Opera Android
Full support
26
| Safari iOS No support No | Samsung Internet Android Full support 4.0 |
ready | Chrome No support No | Edge ? | Firefox
Full support
63
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
63
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
reverse | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
startTime | Chrome Full support 39 | Edge ? | Firefox
Full support
48
| IE No support No | Opera Full support 26 | Safari No support No | WebView Android Full support 39 | Chrome Android Full support 39 | Firefox Android
Full support
48
| Opera Android Full support 26 | Safari iOS No support No | Samsung Internet Android Full support 4.0 |
timeline | Chrome No support No | Edge ? | Firefox
Full support
63
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
63
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
updatePlaybackRate | Chrome No support No | Edge No support No | Firefox Full support 60 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 60 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.