animation-delay

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨setembro de 2015⁩.

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.

css

/* 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
Computed value	as specified
Animation type	Not animatable

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.

Nota: 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.