logo标签列表

如何依次播放不同的CSS动画？

javascriptjqueryhtmlcss
20

我想要连续播放不同的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">

4
你需要使用 animation-delay来设置第二个动画在另一个之后开始，但说实话，用 Javascript 更适合处理这种情况。 - Paulie_D
谢谢。我已经延迟了第二个，但它仍然与第一个同时触发，它们最终只是并排显示。我该如何使用Javascript解决这个问题？ - Flow
1
有一个动画（可能在一个类中），然后迭代您的元素，连续应用该类，并在每个元素之间设置超时。 - Paulie_D
4个回答
7
使用animation-delay属性。
animation: a, b;
animation-duration: 2s, 2s; 
animation-delay: 0s, 4s;

动画b将在4秒后开始，而动画a将立即开始。

6
要在纯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">

@Parapluie 谢谢。 - Shomz
1

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

0

我通过改编Noah Addy的这个概念http://digitalfio.github.io/Stagger.css/，成功地实现了类似的效果。

你需要调整一下时间来达到你想要的15秒延迟，但除此之外应该相当简单。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接