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
168
169
170
171
172
173
174
175
176
177
178
|
---
title: '@keyframes'
slug: Web/CSS/@keyframes
translation_of: Web/CSS/@keyframes
---
<p>{{ CSSRef() }} {{ SeeCompatTable() }}</p>
<h3 id="Resumen">Resumen</h3>
<p>La regla arroba <code>@keyframes</code> permite a los autores controlar los pasos intermedios en una secuencia de animación CSS mediante el establecimiento de keyframes (o puntos de trayectoria) a lo largo de la secuencia de animación que debe ser alcanzado por determinados puntos durante la animación. Esto le da un control más específico sobre los pasos intermedios de la secuencia de animación que se obtiene al dejar que el navegador maneje todo automáticamente.</p>
<div>Para utilizar keyframes, se crea una regla de <span style="font-family: monospace;">@keyframes</span> con un nombre que es utilizada por la propiedad {{cssxref ("animation-name")}} para que coincida con una animación de keyframe a su lista. Cada regla <span style="font-family: monospace; line-height: 1.5em;">@keyframes </span><span style="line-height: 1.5em;">contiene una lista de estilo de selectores de keyframe, cada una de los cuales está compuesto de un porcentaje a lo largo de la animación en la que se produce el keyframe así como un bloque que contiene la información de estilo para ese keyframe.</span></div>
<div> </div>
<div>Puede listar los keyframes en cualquier orden, éstos serán tratados en el orden en que los porcentajes especificados indican que debe ocurrir.</div>
<h4 id="Listas_válidas_de_keyframe">Listas válidas de keyframe</h4>
<div>Para obtener una lista de keyframe que sea válida, debe incluir reglas para al menos los tiempos <span style="font-family: courier new,andale mono,monospace; line-height: normal;">0%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">desde</span><span style="line-height: 1.5em;">) y </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">100%</span><span style="line-height: 1.5em;"> (o </span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">hacia</span><span style="line-height: 1.5em;">) (o sea, los estados inicial y final de la animación). Si ambos desplazamientos de tiempo no se especifican, la declaración </span>keyframe<span style="line-height: 1.5em;"> es inválida y no se puede utilizar para la animación.</span></div>
<div> </div>
<div>Si se incluyen las propiedades que no se pueden animar en sus reglas de keyframe, serán ignoradas, pero las propiedades admitidas todavía estarán animadas.</div>
<h4 id="Duplicar_resolución">Duplicar resolución</h4>
<div>Si existen varios conjuntos de keyframe para un nombre dado, el último encontrado se utiliza. Las reglas de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> no estan en cascada, por lo que nunca las animaciones se conducen en keyframe desde un conjunto de reglas más de uno.</div>
<div> </div>
<div>Si una animación en tiempo compensado dado se duplica, el último keyframe en la regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span> para que ese porcentaje se utilice para ese frame. No hay una cascada dentro de una regla de <span style="font-family: courier new,andale mono,monospace;">@keyframes</span><br>
si varios kayframes especifican los valores de los mismos porcentajes.</div>
<div>
<h3 id="Cuando_las_propiedades_son_dejadas_fuera_de_algunos_keyframes">Cuando las propiedades son dejadas fuera de algunos keyframes</h3>
<div>Cualquier propiedad que no se especifican en cualquier keyframes son interpoladas (con la excepción de aquellas que no pueden ser interpoladas, las que son eliminadas de la animación completamente). Por ejemplo:</div>
</div>
<pre class="brush: css">@keyframes identifier {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}
</pre>
<div>En este caso, la propiedad {{cssxref ("top")}} anima con los keyframes de 0%, 30% y 100%, y {{cssxref ("left")}} anima utilizando los keyframes 0%, 68%, y 100%.</div>
<div> </div>
<div>Sólo las propiedades que se especifican tanto en el 0% y 100% de keyframe serán animadas; cualquier propiedad no incluido en ambos de los keyframes conservarán su valor de partida para la duración de la secuencia de animación.</div>
<h3 id="Cuando_se_define_un_keyframe_varias_veces">Cuando se define un keyframe varias veces</h3>
<div>La especificación define que si un keyframe se define varias veces, pero no todas las propiedades afectadas se especifican en cada keyframe, sólo los valores especificados en el último keyframe se consideran. Por ejemplo:</div>
<pre>@keyframes identifier {
0% { top: 0; }
50% { top: 30px; left: 20px; }
50% { top: 10px; }
100% { top: 0; }
}
</pre>
<div>
<div>En este ejemplo, en el 50% del keyframe, el valor utilizado es <code style="font-size: 14px;">top: 10px</code> y todos los demás valores en este keyframe se ignoran.</div>
<div> </div>
<div>{{non-standard_inline}} {{fx_minversion_inline ("14")}} los keyframes (fotogramas clave) en cascada son compatibles a partir de Firefox 14. Para el ejemplo anterior, esto significa que en el fotograma clave 50%, el valor left: 20px será considerado. Esto no está definido en la especificación todavía, pero se está discutiendo.</div>
</div>
<h2 id="Sintaxis">Sintaxis</h2>
<pre>@keyframes <identifier> {
[ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*
}
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><identifier></code></dt>
<dd>Un nombre que identifica la lista de keyframe. Debe coincidir con el identificador de la producción en la sintaxis del CSS.</dd>
<dt><code>from</code></dt>
<dd>Un desplazamiento inicial de <code>0%</code>.</dd>
<dt><code>to</code></dt>
<dd>Un desplazamiento final de <code>100%</code>.</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>Un porcentaje de las veces aunque la secuencia de la animación en la que el keyframe especifica debe ocurrir.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Mira los ejemplos del <a href="/en/CSS/CSS_animations" title="en/CSS/CSS_animations">CSS animations</a>.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<p>Compatibilidad del navegador</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificaciones</th>
<th scope="col">Estadp</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}</td>
<td>{{ Spec2('CSS3 Animations') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Características</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.10 <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>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Características</th>
<th>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>{{ CompatVersionUnknown() }}{{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoMobile("5.0") }}{{ property_prefix("-moz") }}<br>
{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>
<p>{{ CompatUnknown()}}iones</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Vease_también">Vease también</h2>
</div>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_animations" title="en/CSS/CSS_animations">Using CSS animations</a></li>
<li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li>
</ul>
|
