1 files changed, 145 insertions, 0 deletions
diff --git a/files/pt-br/web/css/animation-delay/index.html b/files/pt-br/web/css/animation-delay/index.html
new file mode 100644
index 0000000000..e8ed7db06d
--- /dev/null
+++ b/files/pt-br/web/css/animation-delay/index.html
@@ -0,0 +1,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("&lt;time&gt;")}}</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>