Repeat animation in css

Question

Good afternoon. I have a little problem with css Animation. I am using 3 different keyframes to make an animation, however when I finish these 3 keyframes I would like to repeat them in exactly the same order. If I place the property to animation-iteration-count as infinite he goes completely mad.

To better understand what I’m talking about, see the example on the link https://jsfiddle.net/4pnquy2p/1/

As soon as the word "Mirai" goes missing, I’d like to repeat the effect of the beginning.

Thanks in advance.

Answer 1

Currently CSS Animation does not have the delay property after the end of the animation, the property exists only when starting the animation.

However, by making some simple calculations, it is possible to make the animation repeat using only CSS.

Since I don’t just paste codes and I want you to understand the proposed solution, the explanation will be a little long. If you just want a solution without understanding it (not recommend), just copy the CSS codes I posted below separately and replace 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 code above says that animation drawwill be 2.6 seconds long with an initial delay of 0 seconds, the animation preenchewill have a duration of 0.5 seconds with an initial delay of 2.6 seconds and an end to animation somewill have a duration of 0.5 seconds and an initial delay of 3.6 seconds.

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

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

In the parish we’ll understand better.

Let’s change the class anima-escrito for all animations to be 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 animation draw has a desired duration of 2.6 seconds without any delay, so just make a simple 3 rule, ie if the total animation is 4.1 seconds and the animation draw is 2.6 seconds, just do the calculation 2.6s*100/4.1s = 63%. The result indicates that the animation draw 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.
}

Animation preenche 1 more calculation is required, since there is a delay in the animation. The animation has a delay of 2.6 seconds, that is, it occupies 2.6s*100/4.1s = 63% of the total animation and the desired animation time is 0.5 seconds, that is, it 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 occurs for animation some. 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.
}

Behold here the working code.

Answer 2

After a long time I will leave an answer to which you must be starting and have a similar doubt or the same. If you put a bit of pure javascript should work quite simply and efficiently, create a constant with the value in milliseconds ex: const time = 60000; "time" corresponds to 1 minute(60000 mileseconds) and create a class in the object you want to animate and repeat the animation every 1 minute, I will use the name "anima" for the class as an example. use setInterval() to make it work, ex: setInterval( ()=>{ anima.classList.toggle("anima"); }, time); each "time" (60000ms), changes the object class to "anima" and removes nomavente in the same interval, thus repeating the animation.