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
143
144
145
146
147
|
---
title: Animation
slug: Web/API/Animation
tags:
- API
- Animacion
- Experimental
- Interfaz
- Reeferencia
- Web Animations
- waapi
- web animation api
translation_of: Web/API/Animation
---
<div>{{ APIRef("Web Animations") }}{{SeeCompatTable}}</div>
<p>La interfaz <strong><code>Animation</code></strong> de la <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">Web Animations API</a> representa un reproductor de animación y proporciona controles de reproducción y una línea de tiempo para un nodo o una fuente de animación.</p>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("Animation.Animation()", "Animation()")}}</dt>
<dd>Crea una nueva instancia de objeto <code>Animation</code>.</dd>
</dl>
<h2 id="Propiedades">Propiedades</h2>
<dl>
<dt>{{domxref("Animation.currentTime")}}</dt>
<dd>El valor del tiempo de la animación actual en milisegundos , ya sea en ejecución o en pausa. Si la animación carece de {{domxref("AnimationTimeline", "timeline")}}, está inactivo, o no se ha reproducido todavía, su valor es <code>null</code>.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.effect")}}</dt>
<dd>Obtiene y establece el {{domxref("AnimationEffectReadOnly")}} asociado con esta animación. Normalmente, este será un objeto {{domxref("KeyframeEffect")}}.</dd>
<dt>{{domxref("Animation.finished")}} {{readOnlyInline}}</dt>
<dd>Devuelve la Promesa actual terminada para esta animación.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.id")}}</dt>
<dd>Obtiene y establece la <code>String</code> usada para identificar la animación.</dd>
<dt>{{domxref("Animation.playState")}} {{readOnlyInline}}</dt>
<dd>Devuelve un valor enumerado que describe el estado de la reproducción de una animación.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.playbackRate")}}</dt>
<dd>Obtiene o establece la velocidad de reproducción de la animación.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.ready")}} {{readOnlyInline}}</dt>
<dd>Devuelve la Promesa actual lista para esta animación.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.startTime")}}</dt>
<dd>Obiene o establece la hora programada en la que debe comenzar la reproducción de la animación.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.timeline")}}</dt>
<dd>Obtiene o establece el {{domxref("AnimationTimeline", "timeline")}} asociado con esta animación.</dd>
</dl>
<h3 id="Manejadores_de_eventos">Manejadores de eventos</h3>
<dl>
<dt>{{domxref("Animation.oncancel")}}</dt>
<dd>Obtiene y establece en manejador de eventos para el evento <code>cancel</code>.</dd>
<dt>{{domxref("Animation.onfinish")}}</dt>
<dd>Obtiene y establece en manejador de eventos para el evento <code>finish</code> .</dd>
</dl>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>{{domxref("Animation.cancel()")}}</dt>
<dd>Borra todos los {{domxref("KeyframeEffect", "keyframeEffects")}} causados por la animación y aborta su reproducción.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.finish()")}}</dt>
<dd>Busca cualquier final de una animación, dependiendo de si la animación se está reproduciendo o invirtiendo.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.pause()")}}</dt>
<dd>Pone la reproducción en pausa.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.play()")}}</dt>
<dd><span id="result_box" lang="es"><span>Busca el final de una animación, dependiendo de si la animación se está reproduciendo o si se está invirtiendo.</span></span></dd>
</dl>
<dl>
<dt>{{domxref("Animation.reverse()")}}</dt>
<dd><span id="result_box" lang="es"><span>Invierte la dirección de reproducción, deteniéndose al comienzo de la animación</span></span>. Si la animación finaliza o no se activa, volverá a reproducirse desde el final al principio.</dd>
</dl>
<dl>
<dt>{{domxref("Animation.updatePlaybackRate()")}}</dt>
<dd>Establece la velocidad de la animación después de sincronizar por primera vez su posición de reproducción.</dd>
</dl>
<h2 id="Problemas_de_accesibilidad">Problemas de accesibilidad</h2>
<p>Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o <span class="short_text" id="result_box" lang="es"><span>síndrome de sensibilidad escotópica</span></span>.</p>
<p>Considera ofrecer un mecanismo para pausar o deshabilitar las animaciones, así como utilizar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion">Reduced Motion Media Query</a> para crear una experiencia complementaria para los usuarios que han expresado su preferencia por experiencias no animadas.</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="https://developer.mozilla.org/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="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
<tr>
<td>{{SpecName("Web Animations", "#the-animation-interface", "Animation")}}</td>
<td>{{Spec2("Web Animations")}}</td>
<td>Definición inicial</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<p>{{Compat("api.Animation")}}</p>
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API">API de Animaciones Web</a></li>
</ul>
|
