blob: b9b69000c1e0211b800eb2645146ad45fc4465d8 (
plain)
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
|
---
title: transition
slug: Web/CSS/transition
translation_of: Web/CSS/transition
---
<p>{{ CSSRef("CSS Transitions") }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Sumario">Sumario</h2>
<p>La propiedad <code>transition</code> es una <a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propiedad abreviada</a> de {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }}, y {{ cssxref("transition-delay") }}. Permite definir la transición entre dos estados de un elemento. Hay diferentes estados que pueden ser definidos utilizando <a href="/en-US/docs/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-clases</a> como {{cssxref(":hover")}} o {{cssxref(":active")}} o aplicado dinámicamente usando JavaScript.</p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="brush:css">/* Aplicar a 1 propiedad */
/* nombre de la propiedad | duración */
transition: margin-left 4s;
/* nombre de la propiedad | duración | retardo */
transition: margin-left 4s 1s;
/* nombre de la propiedad | duración | función | retardo */
transition: margin-left 4s ease-in-out 1s;
/* Aplicar a 2 propiedades */
transition: margin-left 4s, color 1s;
/* Aplicar a todas las propiedades que cambien */
transition: all 0.5s ease-out;
</pre>
<p>Nótese que el orden es importante dentro de los elementos de la propiedad. El primer valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-duration" title="/en-US/docs/CSS/transition-duration">transition-duration</a>, y el segundo valor que puede ser analizado como tiempo es asignado a la propiedad <a href="/en-US/docs/CSS/transition-delay" title="/en-US/docs/CSS/transition-delay">transition-delay</a>.</p>
<p>Véase <a href="/en/CSS/CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">cuando la lista de valores de propiedades son de diferentes tamaños</a> para más detalles de cómo se manejan las cosas cuando la lista de valores de propiedades no son de tamaños iguales. En resumen, las descripciones extras más allá del número de propiedades que son animadas son ignoradas.</p>
<h3 id="Sintaxis_formal">Sintaxis formal</h3>
<pre class="syntaxbox">{{csssyntax("transition")}}
</pre>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Hay muchos ejemplos de transiciones CSS en el artículo principal <a href="/en/CSS/CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Transitions', '#transition', 'transition') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0 {{ property_prefix("-webkit") }}<br>
26.0</td>
<td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("-moz") }}<br>
{{ CompatGeckoDesktop("16.0") }}</td>
<td>10.0</td>
<td>11.6 {{ 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>3.0 {{ property_prefix("-webkit") }}<br>
6.1</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.1 {{ property_prefix("-webkit") }}</td>
<td>{{ CompatGeckoMobile("2.0") }} {{ property_prefix("-moz") }}<br>
{{ CompatGeckoMobile("16.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>10.0 {{ 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>3.2 {{ property_prefix("-webkit") }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Véase_también">Véase también</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Usando transiciones CSS</a></li>
<li>{{ domxref("TransitionEvent") }}</li>
</ul>
|
