CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alioua walid
alioua walid

Reputation: 247

Start a CSS animation only if another one is already finished

I have 2 squares, i want to start the animation related to the red one only if the animation related to the blue on is already finished.

Which as a final result would be a cycle of animations. How can i do that ?

.box {
    width: 100px;
    height: 100px;
    
    position: absolute;
    

}

.red{
    background-color: red;
    top: 40%;
    -webkit-animation-name: example_red; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_red;
    animation-duration: 1s;
}

.blue{
    background-color: blue;
    top: 10%;
    -webkit-animation-name: example_blue; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_blue;
    animation-duration: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_red {
    0%   {top:30%;}
    80% { top:42%;}
    100% { top:40%;}
}

/* Standard syntax */
@keyframes example_red {
    0%   { top:30%;}
    80% {  top:42%;}
    100% { top:40%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}

/* Standard syntax */
@keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}
<div class="box red"></div>
<div class="box blue"></div>

Thanks everyone.

Upvotes: 0

Views: 75

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

Here, I splitted the CSS .red rule in two, one for the color and size and the other to assign the animation. I made the same for .blue.

Then, on the animationEnd event, just toggle the .animation class for both .box elements to have an infinite "loop" effect.

On load, you need to start the thing by adding the animation class to one of the two .box. You can do it using jQuery (like I did) or directly in the markup.

$(".box").on("animationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd",function(){
  $(".box").toggleClass("animation");
});

$(".red").addClass("animation");
.box {
    width: 100px;
    height: 100px;
    position: absolute;
}

.red{
    background-color: red;
    top: 40%;
}
.red.animation{
    -webkit-animation-name: example_red; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_red;
    animation-duration: 1s;
}

.blue{
    background-color: blue;
    top: 10%;
}
.blue.animation{
    -webkit-animation-name: example_blue; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_blue;
    animation-duration: 1s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_red {
    0%   {top:30%;}
    80% { top:42%;}
    100% { top:40%;}
}

/* Standard syntax */
@keyframes example_red {
    0%   { top:30%;}
    80% {  top:42%;}
    100% { top:40%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}

/* Standard syntax */
@keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box red"></div>
<div class="box blue"></div>

Bonus question:
To have 3 animated squares (or more), you can't just toggle classes. You need to have a counter to know which square just finished animating.

This counter will have to cycle from zero to the amount of .box... So it has to stay in range! The remainder operator % is useful here.

var boxCounter = 0;

$(".box").on("animationEnd msAnimationEnd oAnimationEnd webkitAnimationEnd",function(){
  $(".box").removeClass("animation");
  boxCounter = (boxCounter+1) % $(".box").length;
  $(".box").eq(boxCounter).addClass("animation");
});

$(".red").addClass("animation");
.box {
    width: 100px;
    height: 100px;
    position: absolute;
}

.red{
    background-color: red;
    top: 40%;
}
.red.animation{
    -webkit-animation-name: example_red; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_red;
    animation-duration: 1s;
}

.blue{
    background-color: blue;
    top: 10%;
}
.blue.animation{
    -webkit-animation-name: example_blue; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_blue;
    animation-duration: 1s;
}

.green{
    background-color: green;
    top: 70%;
}
.green.animation{
    -webkit-animation-name: example_green; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example_green;
    animation-duration: 1s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_red {
    0%   {top:30%;}
    80% { top:42%;}
    100% { top:40%;}
}

/* Standard syntax */
@keyframes example_red {
    0%   { top:30%;}
    80% {  top:42%;}
    100% { top:40%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}

/* Standard syntax */
@keyframes example_blue {
    0%   { top:5%;}
    80% { top:12%;}
    100% { top:10%;}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example_green {
    0%   { top:75%;}
    80% { top:80%;}
    100% { top:75%;}
}

/* Standard syntax */
@keyframes example_green {
    0%   { top:75%;}
    80% { top:80%;}
    100% { top:75%;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

Upvotes: 1

Related Questions