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 value	`0s`
Aplica-se a	all elements, `::before` and `::after` pseudo-elements
Inherited	não
Midia	visual
Computed value	as specified
Animation type	discrete
Canonical order	the unique non-ambiguous order defined by the formal grammar

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 em diferentes modos, dependendo de quantos existam. Para mais informações veja Setting multiple animation property values.

Sintaxe formal

<time>#

Exemplos

Veja CSS animations para exemplos.

Especificação

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

Compatibilidade com os browsers

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Desktop
Mobile

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	(Yes)-webkit 43.0	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)^[1]	10	12-o 12.10	4.0-webkit

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile	Chrome for Android
Basic support	(Yes)-webkit	(Yes)-webkit (Yes)	5.0 (5.0)-moz 16.0 (16.0)^[1]	?	12-o	(Yes)-webkit	?

[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

Using CSS animations
JavaScript AnimationEvent API