Planos a partir de R$ 32/mês Inscreva-se Agora

Animation Delay

Código | 3.546 | 25 de agosto de 2016
animation-delay

Com o animation-delay você pode indicar que a animação só deverá começar após tantos segundos. O uso dela é essencial quando possuímos uma sequência de itens que serão animados na página.

Animar um elemento de cada vez é mais uma forma de deixar ela mais parecida com o mundo real. Por exemplo, quando você está correndo e para, cada parte do seu corpo para em um tempo específico, desde o seu cabelo aos seus braços.

No exemplo abaixo, além do cubic-bezier, o animation-delay também foi responsável por deixar a animação mais realista.

See the Pen animation-timing-function by André | Origamid (@origamid) on CodePen.

Veja agora um exemplo que anima todos os itens de uma única vez.

See the Pen animation-sem-delay by André | Origamid (@origamid) on CodePen.

A declaração do animation-delay é bem simples, basta indicar quantos segundos você deseja que ele espere antes de disparar a animação.


.modal {
    animation-delay: .3s;
}

Vale lembrar que caso você esteja utilizando apenas a propriedade animation, o delay deve vir logo após a função de timing. No caso abaixo o delay é de .3s


.modal {
    animation: slide 1s ease .3s;
}

Cada animação vai demandar um delay diferente, então não tem como eu te passar uma fórmula de quantos segundos é o ideal. A dica é nunca criar um delay que seja maior que a animação anterior. Ou seja, você quer que o item comece a animar antes que o item anterior pare de animar.

No exemplo dos modais, eu comecei adicionando 0.15s ao H1 que é o segundo elemento animado após o surgimento do modal. Depois eu fui incrementando os outros elementos (o p e o botão) com apenas 0.05s. Algo bem sutil, mas que faz toda a diferença.

Ícone: Wait by Gregor Črešnar from the Noun Project

Todas as postagens sobre animações com CSS:

Mais Dicas

Dica #10 Tipografia – Display

Scroll Suave para Link Interno

CSS – Box Shadow

Para que serve o Clearfix

Otimize seu CSS com Mixins de SASS