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: