Animation iteration delay CSS3

Question

Is there a way to add a delay between each iteration?

EX: I want to add a first delay of 2s and an interation delay of 10s

Here is some code:

Code:

/* PROCESSAR AQUI! */
/*...*/


/* KEYFRAMES */

@-webkit-keyframes transitdescription {
    15%     { margin-left: 45px;}
}

@-webkit-keyframes transitimage {
    0%      { right: -100%;}
    10%     { right: -webkit-calc(93% - 350px);}
    25%    { right: -webkit-calc(90% - 350px);}
    90%    { right: -webkit-calc(90% - 350px);}
    100%    { right: -webkit-calc(200%);}
}

@-webkit-keyframes rotateimg {
    50%  {-webkit-transform: rotate(-10deg);}
}

@-webkit-keyframes pluswidth {
    50%  {  width: 450px;}
}

@-webkit-keyframes leaveimage {
    50%  {  width: 450px;}
}

Thanks.

Whats an interation? I'm guessing either iteration or interaction? — Kevin Brydon, Mar 23 '13 at 16:05
Iteration* Now I'm using a javascript that remove and adds the class every x seconds — Maurício Giordano, Mar 23 '13 at 16:07
So when the page loads you want to wait 2 seconds then animate, then when the animation has finished you want to wait ten seconds then animate? — Kevin Brydon, Mar 25 '13 at 08:57
Does this answer your question? [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) — Mahozad, May 08 '22 at 09:25

score 4 · Answer 1 · edited May 23 '17 at 12:07

4

There isn't such a property, although it has been suggested.

There are workarounds:

@-webkit-keyframes transitimage {
    /* animation here */
    10%, 100% { /* wait for 10 seconds without doing anything */ }
}

which is far from ideal.
You can see this related question for other workarounds.

edited May 23 '17 at 12:07

Community

1
1

answered Feb 06 '14 at 11:37

Razor

27,418
8
53
76

Animation iteration delay CSS3

1 Answers1