javascript - 只有当另一个动画已经完成时才开始一个 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 事件中，只需切换两个 .box 元素的 .animation 类即可产生无限“循环”效果.

在加载时，您需要通过将 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 个动画方 block (或更多)，您不能只切换类。你需要有一个计数器来知道哪个方 block 刚刚完成动画。

这个计数器必须从零循环到 .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>