blob: e5e798dda09f361ae6c322405eadd98d42367d5d (
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
129
130
|
---
title: transition
slug: Web/CSS/transition
translation_of: Web/CSS/transition
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>
<h2 id="Summary">Summary</h2>
<p>A propriedade de <a href="/en/CSS" title="CSS">CSS </a><strong>transition</strong> é uma <a href="/en-US/docs/Web/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">propriedade abreviada</a> para {{ cssxref("transition-property") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-timing-function") }} e {{ cssxref("transition-delay") }}. Ela permite definir a transição entre dois estados de um elemento. Estados diferentes podem ser definidos usando <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/CSS/Pseudo-classes">pseudo-classes</a> tais como {{cssxref(":hover")}} ou {{cssxref(":active")}}; ou dinamicamente, usando javascript.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="brush:css">/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;
/* property name | duration | delay */
transition: margin-left 4s 1s;
/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-left 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
/* Global values */
transition: inherit;
transition: initial;
transition: unset;
</pre>
<p>Observe que a ordem é importante dentro dos itens nesta propriedade: o primeiro valor que pode ser analisado como tempo é atribuído ao {{cssxref("transition-duration")}}, duration e o segundo valor que pode ser analisado como tempo é atribuído ao {{cssxref("transition-delay")}}.</p>
<p>Veja <a href="/pt-BR/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Quando_os_tamanhos_dos_valores_das_listas_das_propriedades_s%C3%A3o_de_tamanhos_diferentes">como as coisas são manipuladas</a> quando as listas de valores de propriedades não têm o mesmo comprimento. Em resumo, descrições de transição extras além do número de propriedades realmente sendo animadas são ignoradas.</p>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Examples">Examples</h2>
<p>Existem vários outros exemplos de transições CSS incluídas no artigo principal sobre <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">CSS transitions</a>.</p>
<h2 id="Specifications">Specifications</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-shorthand-property', 'transition') }}</td>
<td>{{ Spec2('CSS3 Transitions') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</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="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/CSS/Using_CSS_transitions" title="en/CSS/CSS transitions">Using CSS transitions</a></li>
<li>{{ domxref("TransitionEvent") }}</li>
</ul>
|
