CODEWITHSUNDEEP
animationcss
markzzz
markzzz

Reputation: 47945

How can I invoke a "loop" in my animation?

I have this animation :

#button-1
{
   -webkit-animation: leaf-rotation-1 1s linear 1 alternate 1.5s;
}

#button-2
{
   -webkit-animation: leaf-rotation-2 1s linear 1 alternate 4s;
}

#button-3
{
   -webkit-animation: leaf-rotation-3 1s linear 1 alternate 5.5s;
}

how you can see, they are executed at 1.5, 4 and 5.5s. Well, when the last (at 5.5) end, how can I restart the first one?

Upvotes: 0

Views: 683

Answers (1)

Madara's Ghost
Madara's Ghost

Reputation: 174957

The solution I have in mind will require you to write 3 different animations, which are well timed, and run those endlessly in a loop.

Here's a live example of the concept

So the first animation ends in 33%, the second starts at 33 and ends at 66, and the finishing runs 66-100. This runs infinitely.

CSS:

@-webkit-keyframes width-1 {
    0% {
        width: 100px;
    }
    17% {
        width: 500px;
    }
    33% {
        width: 100px;
    }
}
@-webkit-keyframes width-2 {
    33% {
        width: 100px;
    }
    50% {
        width: 500px;
    }
    66% {
        width: 100px;
    }
}
@-webkit-keyframes width-3 {
    66% {
        width: 100px;
    }
    83% {
        width: 500px;
    }
    100% {
        width: 100px;
    }
}
div {
    background: red;
    width: 100px;
}

#div1 {
    -webkit-animation: width-1 1s infinite linear;
}

#div2 {
    -webkit-animation: width-2 1s infinite linear;
}

#div3 {
    -webkit-animation: width-3 1s infinite linear;
}

HTML

<div id="div1">Div1</div>
<div id="div2">Div2</div>
<div id="div3">Div3</div>

Upvotes: 2

Related Questions