Запускайте CSS-анимацию, только если другая уже закончена

Question

У меня есть 2 квадрата, я хочу запустить анимацию, связанную с красным, только если анимация, связанная с синим, уже закончена.

Что в конечном итоге будет цикл анимации. Как я могу это сделать?

.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>

Спасибо всем.

Answer 1

Здесь я разделил правило CSS .red на две части: одну для цвета и размера, а другую для назначения анимации. Я сделал то же самое для .blue.

Затем в событии animationEnd просто переключите класс .animation для обоих элементов .box, чтобы получить эффект бесконечной петли.

При загрузке вам нужно начать работу, добавив класс animation к одному из двух .box. Вы можете сделать это с помощью jQuery (как я) или прямо в разметке.

$(".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>

---

Бонусный вопрос:
Чтобы иметь 3 анимированных квадрата (или больше), вы не можете просто переключать классы. Вам нужно иметь счетчик, чтобы узнать, какой квадрат только что закончил анимацию.

Этот счетчик должен будет циклически изменяться от нуля до величины .box ... Так что он должен оставаться в диапазоне! Оператор остатка % полезен здесь.

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>