Repeat animation in css

Currently CSS animation does not have the delay property after the animation ends, the property exists only when the animation starts.

However, by doing some simple calculations, you can make the animation repeat using only CSS.

Since I do not just stick code and want you to understand the proposed solution, the explanation will be a little long. If you just have a solution without understanding it (I do not recommend), just copy the CSS codes I posted below separately and replace them in your current code.

View your current CSS code:

.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;
    }
}

Translating into human language, the above code says that the draw animation will be 2.6 seconds long with an initial delay of 0 seconds, the preenche animation will have a duration of 0.5 seconds with an initial delay of 2.6 seconds and finally the animation some will have a duration of 0.5 seconds and an initial delay of 3.6 seconds.

By doing the calculations, the total duration of the animation will be 4.1 seconds.

The technique that we are going to use is to change the duration of all the animations so that they are equal to the total time of the whole animation and the management of the delay and the time of the animation will be made within each animation, that is, within each @keyframes .

In the particle we will understand better.

Let's change the class anima-escrito so that all animations are 4.1 seconds long:

.anima-escrito {
    animation: draw 4.1s linear infinite, 
    preenche 4.1s linear infinite, 
    some 4.1s linear infinite;
}

We know that draw animation has a desired duration of 2.6 seconds with no delay, so just make a simple 3 rule, ie if the total animation is 4.1 seconds and the draw animation is 2.6 seconds, just do the calculation 2.6s * 100 / 4.1s = 63%. The result indicates that the draw animation will occupy 63% of the total time.

@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.
}

For the preenche animation, it is necessary to do another calculation, since there is a delay in the animation. The animation has a delay of 2.6 seconds, that is, occupies 2.6s * 100 / 4.1s = 63% of the total animation and the desired animation time is 0.5 seconds, that is, occupies 0.5s * 100 / 4.1s = 12 % of the total animation.

@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.
}

The same is true for the some animation. We know it has a duration of 0.5 seconds and a delay of 3.6 seconds.

@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.
}

See here for the code to work.