W3docs
pt
Entrar

Propriedade CSS animation-delay

A propriedade CSS animation-delay define quando uma animação começa. Veja exemplos e experimente você mesmo.

A propriedade CSS animation-delay especifica quanto tempo aguardar antes de uma animação começar a ser reproduzida. A animação pode começar depois (atraso positivo), imediatamente (0s, o padrão), ou avançar para um ponto no meio da linha do tempo (usando um atraso negativo).

Esta página aborda a sintaxe, atrasos positivos e negativos, milissegundos, como os atrasos se comportam com múltiplas animações e as considerações de acessibilidade que você deve ter em mente. A propriedade animation-delay é uma das propriedades CSS3, e geralmente é usada em conjunto com animation-name e animation-duration.

Por que usar animation-delay

Um atraso é útil sempre que uma animação não deve começar no instante em que a página carrega ou o elemento é adicionado ao DOM. Casos comuns:

  • Escalonamento — dê a uma lista de itens atrasos crescentes (0s, 0.1s, 0.2s, …) para que eles se animem um após o outro, em vez de todos ao mesmo tempo.
  • Sequenciamento — aguarde o término da animação de um elemento antes de outro começar.
  • Pré-avanço — use um atraso negativo para inserir um elemento no meio de uma animação em loop, de modo que ele não pareça "saltar" para o movimento desde o início.

Como o valor funciona

O valor padrão é 0s. O valor pode ser fornecido em segundos (s) ou milissegundos (ms).

  • Um valor positivo (animation-delay: 2s) aguarda esse tempo e, em seguida, reproduz a animação a partir do seu primeiro keyframe.
  • Um valor de 0s inicia a animação imediatamente.
  • Um valor negativo (animation-delay: -2s) inicia a animação imediatamente, mas renderizada como se já estivesse sendo reproduzida por esse tempo. A primeira parte da animação é ignorada — ela nunca é exibida.

Quando múltiplos valores separados por vírgula são especificados, eles se alternam para corresponder ao número de animações listadas em animation-name. Por exemplo, animation-delay: 0s, 1s aplica 0s à primeira animação e 1s à segunda.

Se os keyframes de uma animação omitem o valor inicial, o navegador usa os estilos calculados do elemento no momento em que a animação começa.

Nota: animation-delay afeta apenas a primeira iteração. Ele não adiciona uma pausa entre as iterações de uma animação repetida — para isso, incorpore a pausa nos próprios keyframes.

PropriedadeValor
Valor Inicial0s
Aplica-se aTodos os elementos, pseudo-elementos ::before e ::after.
HerdadoNão.
AnimávelNão.
VersãoCSS3
Sintaxe DOMobject.style.animationDelay = "1s";

Sintaxe

Sintaxe da Propriedade CSS animation-delay

animation-delay: time | initial | inherit;

Exemplo da propriedade animation-delay:

Exemplo da Propriedade CSS animation-delay

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #1c87c9;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 3s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example</h2>
    <p>Here the animation starts after 3 seconds.</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Exemplo da propriedade animation-delay com valor negativo:

Exemplo da Propriedade CSS animation-delay com valor negativo

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: #ccc;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: -2s;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example with negative value.</h2>
    <p>Here, the animation will start as if it had already been playing for 2 seconds.</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Exemplo da propriedade animation-delay especificada em milissegundos:

Exemplo da Propriedade CSS animation-delay com milissegundos

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 120px;
        height: 120px;
        background: #8ebf42;
        position: relative;
        animation: delay 5s infinite;
        animation-delay: 200ms;
      }
      @keyframes delay {
        from {
          left: 0px;
        }
        to {
          left: 300px;
        }
      }
    </style>
  </head>
  <body>
    <h2>Animation-delay example in milliseconds.</h2>
    <p>Here, the animation will start after 200ms.</p>
    <div></div>
  </body>
</html>
Experimente Você Mesmo »

Valores

ValorDescriçãoExperimente
timeDefine o número de segundos (s) ou milissegundos (ms) a aguardar antes de a animação começar. É opcional.Experimente »
initialDefine a propriedade com seu valor padrão.
inheritHerda a propriedade do seu elemento pai.

Acessibilidade

Animações com atraso e em loop podem ser perturbadoras e podem causar desconforto para usuários com distúrbios vestibulares. Respeite a preferência do sistema do usuário com a media query prefers-reduced-motion e desative (ou reduza) o movimento quando solicitado:

@media (prefers-reduced-motion: reduce) {
  div {
    animation: none;
  }
}

Abreviação

Raramente se define animation-delay isoladamente — geralmente é o quarto valor na abreviação animation, que combina todas as sub-propriedades de animação:

/* name | duration | timing-function | delay */
div {
  animation: delay 5s ease 3s infinite;
}

Propriedades relacionadas

Prática

Prática
Qual é a definição correta da propriedade CSS animation-delay?
Qual é a definição correta da propriedade CSS animation-delay?
Was this page helpful?