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>

仅当另一个动画已经完成时才开始CSS动画

1 个答案: