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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: animation-direction
slug: Web/CSS/animation-direction
tags:
- CSS
- CSS Animations
- CSS Property
- Experemiental
- Reference
translation_of: Web/CSS/animation-direction
---
<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <code>animation-direction</code> indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.</p>
<p>Es conveniente usar la propiedad abreviada {{ cssxref("animation") }} para ajustar todas las propiedades de animación una sola vez.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="twopartsyntaxbox">Gramática formal: [ normal | reverse | alternate | alternate-reverse ] [, [ normal | reverse | alternate | alternate-reverse ] ]*
</pre>
<pre>animation-direction: normal
animation-direction: reverse
animation-direction: alternate
animation-direction: alternate-reverse
animation-direction: normal, reverse
animation-direction: alternate, reverse, normal
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Cada vez que termina un ciclo, la animación se reinicia al estado inicial y comienza desde el principio. Este es el comportamiento por defecto.</dd>
<dt><code>alternate</code></dt>
<dd>La animación, al terminar un ciclo, invierte su dirección. Es decir, los pasos de la animación se ejecutan al revés. Además, las funciones de tiempo también se invierten; por ejemplo una animación <code>ease-in</code> se convierte en una animación con <code>ease-out</code> cuando se reproduce al revés. El contador que determina si la iteración es par o impar comienza en uno.</dd>
<dt><code>reverse</code></dt>
<dd>Cada ciclo de la animación se reproduce al revés . Cada vez que comienza un ciclo de animación, ésta se posiciona en el estado final y comienza desde ahí.</dd>
<dt><code>alternate-reverse</code></dt>
<dd>Es similar a<code> alternate</code> pero la animación se reproduce al revés. Es decir la animación se posiciona en el estado final, comienza a reproducirse al reves y, cuando llega al inicio vuelve a reproducirse de forma normal hasta llegar al final de la secuencia. Y vuelve otra vez a repetirse. El contador que determina si la iteración es par o impar comienza en uno.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Visitar <a href="/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
<p>Especificaciones</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Animations', '#animation-direction', 'animation-direction') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td>For the two new values, see the <a class="external" href="http://lists.w3.org/Archives/Public/www-style/2011May/0090.html">W3C discussion</a>.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad entre navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoDesktop("5.0") }}{{ property_prefix("-moz") }}<br>
{{ CompatGeckoDesktop("16.0") }}</td>
<td>10</td>
<td>12{{ property_prefix("-o") }}<br>
12.5 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot" title="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
<td>4.0{{ property_prefix("-webkit") }}</td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>19 {{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoDesktop("16.0") }}</td>
<td>10</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>19 {{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoDesktop("16.0") }}</td>
<td>10</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td><code>reverse</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td><code>alternate-reverse</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Consulte_también">Consulte también</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_animations">Usando animaciones CSS</a></li>
<li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>
|
