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
|
---
title: animation-delay
slug: Web/CSS/animation-delay
tags:
- Animação
translation_of: Web/CSS/animation-delay
---
<div>{{CSSRef}}</div>
<p>A propriedade CSS <strong><code>animation-delay</code></strong> especifíca quando uma animação deve começar. Você pode começar a animação no futuro, imediatamente ou desde o início, ou imediatamente e parcialmente através do ciclo de animação.</p>
<pre class="brush:css no-line-numbers">/* Uma animação */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;
/* Várias animações */
animation-delay: 2.1s, 480ms;
</pre>
<p>Muitas vezes é conveniente usar a propriedade abreviada {{cssxref("animation")}} para definir todas as propriedades de animação de uma só vez. </p>
<p>{{cssinfo}}</p>
<h2 id="Sintaxe">Sintaxe</h2>
<h3 id="Valores">Valores</h3>
<dl>
<dt><code>{{cssxref("<time>")}}</code></dt>
<dd>O deslocamento do tempo, a partir do momento em que a animação é aplicada ao elemento, no qual a animação deve começar. Isso pode ser especificado em segundos (<code>s</code>) ou milesegundos or milliseconds (<code>ms</code>). A unidade é necessaria.</dd>
<dd>Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido. O valor de <code>0s</code>, que é o padrão, incida que a animação deve começar desde que foi aplicada.</dd>
<dd>
<p>Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar <code>-1s</code> como tempo da animation-delay , a animação vai começar imediatamente, mas começará 1 segundo na sequência de animação. Se você específicar um valor negativo para a animation-delay, mas o valor inicial é implícito, o valor inicial é retirado do momento em que a animação é aplicada ao elemento.</p>
</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: Quando você especifica vários valores separados por vírgula em uma propriedade <code>animation-*</code> , eles serão atribuídos às animações especificadas na propriedade {{cssxref("animation-name")}} em diferentes modos, dependendo de quantos existam. Para mais informações veja <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations#Setting_multiple_animation_property_values">Setting multiple animation property values</a>.</p>
</div>
<h3 id="Sintaxe_formal">Sintaxe formal</h3>
<pre class="syntaxbox">{{csssyntax}}
</pre>
<h2 id="Exemplos">Exemplos</h2>
<p>Veja <a href="/en-US/docs/CSS/CSS_animations" title="CSS/CSS_animations">CSS animations</a> para exemplos.</p>
<h2 id="Especificação">Especificação</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Status</th>
<th scope="col">Comentário</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}</td>
<td>{{Spec2('CSS3 Animations')}}</td>
<td>Definição inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com os browsers</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatChrome(43.0)}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}<sup>[1]</sup></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>Feature</th>
<th>Android</th>
<th>Edge</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>Basic support</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br>
{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}<br>
{{CompatGeckoMobile("16.0")}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
<td>12{{property_prefix("-o")}}</td>
<td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Além do suporte não prefixado, Gecko 44.0 {{geckoRelease("44.0")}} adicionou um suporte para uma versão prefixada de <code>-webkit-</code> por razões de compatibilidade na Web por trás da preferência <code>layout.css.prefixes.webkit</code>, padronizando para <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49.0")}} os padrões de preferência são <code>true</code>.</p>
<h3 id="Quantum_CSS_notas">Quantum CSS notas</h3>
<ul>
<li>Gecko tem um bug em que, quando você anima um elemento fora da tela na tela, mas especifica um atraso, Gecko não repete em algumas plataformas, e.g. Windows ({{bug(1383239)}}). Isso foi corrigido no Firefox's novo motor CSS paralelo (também conhecido como <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> ou <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, planejado para lançamento no Firefox 57).</li>
</ul>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li><a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="Tutorial about CSS animations">Using CSS animations</a></li>
<li>JavaScript {{domxref("AnimationEvent")}} API</li>
</ul>
|
