---
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>