1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: Animation
slug: Web/API/Animation
tags:
- API
- Animations
- Animações da Web
- Experimental
- Interface
- Referencia
- api de animações da web
- waapi
translation_of: Web/API/Animation
---
<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
<p>The <strong><code>Animation</code></strong> interface of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> represents a single animation player and provides playback controls and a timeline for an animation node or source.</p>
<h2 id="Construtor">Construtor</h2>
<dl>
<dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
<dd>Creates a new <code>Animation</code> object instance.</dd>
</dl>
<h2 id="Propriedades">Propriedades</h2>
<dl>
<dt>{{domxref("Animation.currentTime")}}</dt>
<dd>The current time value of the animation in milliseconds, whether running or paused. If the animation lacks a {{domxref("AnimationTimeline", "timeline")}}, is inactive or hasn't been played yet, its value is <code>null</code>.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.effect")}}</dt>
<dd>Gets and sets the {{domxref("AnimationEffectReadOnly")}} associated with this animation. This will usually be a {{domxref("KeyframeEffect")}} object.</dd>
<dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
<dd>Returns the current finished Promise for this animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.id")}}</dt>
<dd>Gets and sets the <code>String</code> used to identify the animation.</dd>
<dt>{{domxref("Animation.pending")}} {{readonlyinline}}</dt>
<dd>Indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.</dd>
<dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
<dd>Returns an enumerated value describing the playback state of an animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.playbackRate")}}</dt>
<dd>Gets or sets the playback rate of the animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
<dd>Returns the current ready Promise for this animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.startTime")}}</dt>
<dd>Gets or sets the scheduled time when an animation's playback should begin.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.timeline")}}</dt>
<dd>Gets or sets the {{domxref("AnimationTimeline", "timeline")}} associated with this animation.</dd>
</dl>
<h3 id="Manipuladores_de_evento">Manipuladores de evento</h3>
<dl>
<dt>{{domxref("Animation.oncancel")}}</dt>
<dd>Gets and sets the event handler for the <code>cancel</code> event.</dd>
<dt>{{domxref("Animation.onfinish")}}</dt>
<dd>Gets and sets the event handler for the <code>finish</code> event.</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Animation.cancel()")}}</dt>
<dd>Clears all {{domxref("KeyframeEffect", "keyframeEffects")}} caused by this animation and aborts its playback.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.finish()")}}</dt>
<dd>Seeks either end of an animation, depending on whether the animation is playing or reversing.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.pause()")}}</dt>
<dd>Suspends playing of an animation.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.play()")}}</dt>
<dd>Starts or resumes playing of an animation, or begins the animation again if it previously finished.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.reverse()")}}</dt>
<dd>Reverses playback direction, stopping at the start of the animation. If the animation is finished or unplayed, it will play from end to beginning.</dd>
<dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
<dd>Sets the speed of an animation after first synchronizing its playback position.</dd>
</dl>
<h2 id="Preocupações_de_acessibilidade">Preocupações de acessibilidade</h2>
<p>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.</p>
<p>Consider providing a mechanism for pausing or disabling animation, as well as using the <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> to create a complimentary experience for users who have expressed a preference for no animated experiences.</p>
<ul>
<li><a href="https://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article </a></li>
<li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query | CSS-Tricks</a></li>
<li><a href="https://webkit.org/blog/7551/responsive-design-for-motion/">Responsive Design for Motion | WebKit</a></li>
<li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_%E2%80%94_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.2 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Estado</th>
<th scope="col">Comentário</th>
</tr>
<tr>
<td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
<td>{{Spec2("Web Animations")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
<p>{{Compat("api.Animation")}}</p>
|
