CODEWITHSUNDEEP
cssanimation
Maurício Giordano
Maurício Giordano

Reputation: 3276

Animation iteration delay CSS3

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.

Upvotes: 1

Views: 3196

Answers (1)

Razor
Razor

Reputation: 29728

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.

Upvotes: 4

Related Questions