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
|
---
title: animation-timing-function
slug: Web/CSS/animation-timing-function
translation_of: Web/CSS/animation-timing-function
---
<p>{{CSSRef}}{{SeeCompatTable}}</p>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad <a href="/en-US/docs/CSS" title="CSS">CSS</a> <code><strong>animation-timing-function</strong></code> especifica cómo una animación CSS debe avanzar sobre la duración de cada ciclo. Los posibles valores son una o varias {{cssxref("<timing-function>")}}.</p>
<p>Para animaciones con keyframes, la timing function se aplica entre los <a href="/en-US/docs/Web/CSS/@keyframes" title="/en-US/docs/CSS/@keyframes">keyframes</a> en lugar de sobre toda la animación. Es decir, se aplica al comienzo del keyframe y al final del mismo.</p>
<p>Una timing function definida dentro de un keyframe afecta a ese keyframe. Si no está definida para el keyframe, se aplica la timing function para la animación en general.</p>
<p>A menudo, es conveniente usar la propiedad abreviada {{cssxref("animation")}} para ajustar las propiedades de animación una sola vez.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush: css">/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherited;
animation-timing-function: initial;
animation-timing-function: unset;
</pre>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code><timingfunction></code></dt>
<dd>Cada {{cssxref("<timing-function>")}} representa la timing function vinculada a la propiedad correspondiente a animar, como se define en {{cssxref ("animación-propiedad")}}.</dd>
</dl>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Visita <a href="https://developer.mozilla.org/es/CSS/Usando_animaciones_CSS" title="en/CSS/CSS_animations">animaciones CSS</a> para ver algunos ejemplos.</p>
<h2 id="Specifications" name="Specifications">Especificaciones</h2>
<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-timing-function', 'animation-timing-function')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Definición incial</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")}}<br>
{{CompatChrome(43.0)}}</td>
<td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}</td>
<td>10</td>
<td>12 {{property_prefix("-o")}}<br>
12.10</td>
<td>4.0{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</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>12{{property_prefix("-o")}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="sect1"> </h2>
<h2 id="Consulte_también">Consulte también</h2>
<ul>
<li><a href="/es/docs/Web/CSS/CSS_Animations/Using_CSS_animations" title="CSS developer guide about CSS animations">Usando animaciones CSS</a></li>
<li>{{domxref("AnimationEvent", "AnimationEvent")}}</li>
</ul>
|
