Animation with CSS

Question

It is possible to use an infinite animation but with an interval time?

Example: perform the animation + wait 10 seconds + and perform again, and so on.

Is it possible? If yes, they could help?

Answer 1

Yes, in a more practical example, just you leave the duration of the animation with twice the value you need, type 4 seconds of animation, being that only in the first 2 seconds the animation happens, and in the other 2 seconds it is stopped. After that, in @keyframes, you set up for all the animation to happen in the first 50% (50% of 4s = 2s), then in the first 50% of the time the animation happens, and in the other 50% it is stopped.

Logically you can change these values, for example if it is 10s, being 1 second of animation, and 9 second stops in @keyframes your animation has to happen in the first 10% of the time, and then it is 90% stopped

See the example, the animation has a total time of 4s, but the element only moves by 2s (50%), then it is 2 more seconds stopped, totaling 100%

.box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: nome 4s infinite linear;
}
@keyframes nome {
    0% {
        margin-left: 0;
    }
    50% {
        margin-left: 100px;
    }
    100% {
        margin-left: 100px;
    }
}

<div class="box"></div>

Answer 2

Another way is to make a rule of 3 to calculate the animation time and the pause time.

Say you want the animation to last 3 seconds and take a break from 6 seconds. Adding the two together gives a total of 9 seconds.

Rule of 3:

> tempo total = 100%
> tempo animação = x%

> tempo total * x = tempo animação * 100
> x = (tempo animação * 100) / tempo total

The value of x will be the initial percentage from when the animation will be stopped. Applying the values in the 3 rule:

> 9 = 100%
> 3 = x%

> 9x = 300
> x = 300/9
> x = 33.33

So your @keyframes would look like this:

@keyframes anima{
  33.33%, 100% {
    margin-left: 100px;
  }
}

Testing:

div {
    width: 100px;
    height: 100px;
    background: red;
    animation: anima 9s infinite linear;
}

@keyframes anima {
  33.33%, 100% {
    margin-left: 100px;
  }
}

<div></div>

Of 0% until 33.32% the animation will take 3 seconds, and 33.33% to 100% there will be the pause of 6 seconds, totaling the 9s that you specified on the property animation.