animation-delay

A propriedade CSS animation-delay 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.

/* Uma animação */
animation-delay: 3s;
animation-delay: 0s;
animation-delay: -1500ms;

/* Várias animações */
animation-delay: 2.1s, 480ms;

Muitas vezes é conveniente usar a propriedade abreviada animation para definir todas as propriedades de animação de uma só vez. 

Initial value0s
Aplica-se aall elements, ::before and ::after pseudo-elements
Inheritednão
Computed valueas specified
Animation typediscrete

Sintaxe

Valores

<time>
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 (s) ou milesegundos or milliseconds (ms). A unidade é necessaria.
Um valor positivo indica que a animação deve começar após o período de especificação ter decorrido.  O valor de 0s,  que é o padrão, incida que a animação deve começar desde que foi aplicada.

Um valor negativo faz com que a animação comece imediatamente, mas parcialmente através do seu ciclo. Por exemplo, se você específicar -1s 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.

Note: Quando você especifica vários valores separados por vírgula em uma propriedade animation-* ,  eles serão atribuídos às animações especificadas na propriedade animation-name (en-US) em diferentes modos,  dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.

Sintaxe formal

<time># (en-US)

Exemplos

Veja CSS animations para exemplos.

Especificação

Especificação Status Comentário
CSS Animations Level 1
The definition of 'animation-delay' in that specification.		 Rascunho atual Definição inicial.

Compatibilidade com os browsers

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (Yes)-webkit (en-US)
43.0		 (Yes)-webkit (en-US)
(Yes)		 5.0 (5.0)-moz (en-US)
16.0 (16.0)[1]		 10 12-o (en-US)
12.10		 4.0-webkit (en-US)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Basic support (Yes)-webkit (en-US) (Yes)-webkit (en-US)
(Yes)		 5.0 (5.0)-moz (en-US)
16.0 (16.0)[1]		 ? 12-o (en-US) (Yes)-webkit (en-US) ?

[1] Além do suporte não prefixado, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) adicionou um suporte para uma versão prefixada de -webkit- por razões de compatibilidade na Web por trás da preferência layout.css.prefixes.webkit, padronizando para false. Desde Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) os padrões de preferência são true.

Quantum CSS notas

  • 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 Quantum CSS ou Stylo, planejado para lançamento no Firefox 57).

Veja também