Atualmente o CSS animation não possui a propriedade delay após o fim da animação, a propriedade existe apenas ao iniciar a animação.
Entretanto, fazendo alguns cálculos simples, é possível fazer a animação se repetir utilizando apenas CSS.
Como não me limito apenas a colar códigos e quero que você entenda a solução proposta, a explicação ficará um pouco longa. Se você apenas que uma solução sem entende-la (não recomendo), basta copiar os códigos CSS que postei abaixo separadamente e substituir no seu atual código.
Veja o seu atual código CSS:
.anima-escrito {
animation: draw 2.6s 0s forwards 1 linear,
preenche .5s 2.6s forwards 1 linear,
some .5s 3.6s forwards 1 linear;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@keyframes preenche {
to {
fill-opacity: 1;
}
}
@keyframes some {
to {
opacity: 0;
}
}
Traduzindo para linguagem humana, o código acima diz que a animação draw
irá ter 2.6 segundos de duração com um delay inicial de 0 segundos, a animação preenche
terá uma duração de 0.5 segundos com um delay inicial de 2.6 segundos e por fim a animação some
terá uma duração de 0.5 segundos e um delay inicial de 3.6 segundos.
Fazendo os cálculos, a duração total da animação será de 4.1 segundos.
A técnica que vamos utilizar é alterar a duração de todas as animações para que fiquem igual ao tempo total de toda a animação e a gestão do delay e do tempo da animação será feita dentro de cada animação, ou seja, dentro de cada @keyframes
.
Na pártica iremos entender melhor.
Vamos alterar a classe anima-escrito
para que todas as animações fiquem com 4.1 segundos de duração:
.anima-escrito {
animation: draw 4.1s linear infinite,
preenche 4.1s linear infinite,
some 4.1s linear infinite;
}
Sabemos que a animação draw
tem uma duração desejada de 2.6 segundos sem nenhum delay, então basta fazer uma regra de 3 simples, ou seja, se a animação total e de 4.1 segundos e a animação draw
é de 2.6 segundos, basta fazer o cálculo 2.6s*100/4.1s = 63%. O resultado indica que a animação draw
irá ocupar 63% do tempo total.
@keyframes draw {
63% {stroke-dashoffset: 0;} //63% representa 2.6 segundos de 4.1 segundos, ou seja, a animação irá durar 2.6 segundos.
100% {stroke-dashoffset: 0;} //de 63% a 100% (ou seja, 1.5 segundos) mantemos sem nenhuma alteração.
}
Para a animação preenche
é necessário fazer mais 1 cálculo, uma vez que existe um delay na animação. A animação tem um delay de 2.6 segundos, ou seja, ocupa 2.6s*100/4.1s = 63% da animação total e o tempo desejado da animação é de 0.5 segundos, ou seja, ocupa 0.5s*100/4.1s = 12% da animação total.
@keyframes preenche {
63% { fill-opacity: 0; } //durante 2.6 segundos nada é alterado
75% { fill-opacity: 1; } //durante 0.5 segundos (75-63=12%) alteramos a propriedade fill-opacidade de 0 para 1.
100% { fill-opacity: 1; } //de 75% a 100% (ou seja, 1 segundo) mantemos sem nenhuma alteração.
}
O mesmo ocorre para a animação some
. Sabemos que ela tem uma duração de 0.5 segundos e um delay de 3.6 segundos.
@keyframes some {
87% { opacity: 1; } //durante 3.6 segundos nada é alterado
99% { opacity: 0; } //durante 0.5 segundos (87-99=12%) alteramos a propriedade fill-opacidade de 0 para 1
100% { opacity: 0; } //de 99% a 100% (ou seja, 0.041 segundo) mantemos sem nenhuma alteração. Podemos eliminar a linha onde diz 99% uma vez que 0.041 segundo é imperceptível aos olhos humanos.
}
Veja aqui o código a funcionar.