Question

我正在尝试一个接一个地播放不同的css动画，但我无法弄清楚如何。

基本上我要做的就是播放一个动画，在屏幕上显示15秒，然后播放下一个动画，显示15秒，然后播放到下一个动画，最后一个播放时，它应该从顶部重新开始。

以下是它应该播放的第一个示例，显示15秒，然后转到下一个并执行相同操作。

<style> #animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(30px);
  }
  80% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

</style>

<img id="animated-example" class="animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

再运行另一个，显示15秒并继续前进。

<style> #animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
  }
}
@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
</style>

<img id="animated-example" class="animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Answer 1

在纯CSS中实现这一目标的唯一方法是同时运行所有动画并进行一些计算：

每个动画的长度应该相同并且等于所需动画的总长度（意味着如果你想要两个15秒的动画，CSS动画应设置为30秒的长度，没有延迟）
控制每个动画的开始/结束点，你需要相应地修改百分比 - 在上面的例子中，这意味着第一个动画以50％结束，第二个动画开始时。此外，需要对所有中间值进行插值。两个动画很容易，但随着动画总数的增加，您可能需要使用计算器。这是因为我们不考虑延迟 - 当我们有一个15秒的动画在5秒后完成动画时，数字会改变，现在等于33％，等等......

一旦你在这里看到它就会更清楚：

.animated-example {
  width: 300px;
  height: 200px;
  border: solid 1px #1A7404;
  position: absolute;
  background-color: #62A80A;
}

.animated {  
  animation-duration: 20s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}


@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  6% {
    opacity: 1;
    transform: translateX(30px);
  }
  8% {
    transform: translateX(-10px);
  }
  10% {
    transform: translateX(0);
  }
  40% {
    opacity: 1;
    transform: translateX(0);
  }
  42% {
    opacity: 1;
    transform: translateX(30px);
  }
  55% {
    opacity: 0;
    transform: translateX(-2000px);
  }
  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}



@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  50% {
    opacity: 0;
    transform: translateY(-2000px);
  }
  56% {
    opacity: 1;
    transform: translateY(30px);
  }
  58% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(0);
  }
  92% {
    opacity: 1;
    transform: translateY(30px);
  }
  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

<img class="animated-example animated bounceInLeft" src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">
<img class="animated-example animated bounceInDown" src="https://www.facebookbrand.com/img/fb-art.jpg">

Answer 2

我通过Noah Addy改编这个概念成功实现了类似的东西：http://digitalfio.github.io/Stagger.css/

您需要稍微处理时间以获得所需的15秒延迟，但除此之外，它应该相当简单。

Answer 3

animation-delay会完全按照您要查找的内容而，因为您希望动画在最后一个完成后重复;不幸的是，（目前）没有办法在循环动画的迭代之间指定延迟。

但是，您可以使用一些JavaScript实现您想要做的事情，如下所示。要添加更多动画，只需将其类名添加到代码开头的animations数组中。

var animations=["bounceInLeft","bounceInDown"],
    count=animations.length,
    classlist=document.querySelector("img").classList,
    holder=document.createElement("div"),
    style=window.getComputedStyle(holder),
    delay=15,
    current,wait,x;
holder.style.display="none";
document.body.appendChild(holder);
animate();
function animate(){
    wait=0;
    x=0;
    while(x<count){
        setTimeout(function(a){
            classlist.remove(current);
            classlist.add(a);
            current=a;
        },wait*1000,animations[x]);
        holder.className=animations[x];
        wait+=delay+parseInt(style.getPropertyValue("animation-duration"));
        x++;
    }
    setTimeout(animate,wait*1000);
};

img{
    animation-fill-mode:both;
    height:200px;
    width:300px;
}
.bounceInDown{
    animation-duration:1s;
    animation-name:bounceInDown;
}
.bounceInLeft{
    animation-duration:2s;
    animation-name:bounceInLeft;
}
@keyframes bounceInDown{
    0%{
        opacity:0;
        transform:translateY(-2000px);
    }
    60%{
        opacity:1;
        transform:translateY(30px);
    }
    80%{
        transform:translateY(-10px);
    }
    100%{
        transform:translateY(0);
    }
}
@keyframes bounceInLeft{
    0%{
        opacity:0;
        transform:translateX(-2000px);
    }
    60%{
        opacity:1;
        transform:translateX(30px);
    }
    80%{
        transform:translateX(-10px);
    }
    100%{
        transform:translateX(0);
    }
}

<img src="http://webmarketingtoday.com/wp-content/uploads/Screen-Shot-2012-05-24-at-7.31.54-AM-288x216.png">

如何一个接一个地播放不同的CSS动画？

3 个答案: