如何一个接一个地播放不同的CSS动画？ [英] How to play different css animations one after another?

问题描述

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

I'm trying to play different css animations one after another but I can't figure out how to.

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

Basically what I'm trying to do is play one Animation, have it on screen for 15 seconds, then play the next one, show it for 15 seconds and on to the next one and when the last one has been played, it should start again from the top.

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

Here's an example of the first one it should play, show for 15 seconds and then move on to the next one and do the same.

<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秒并继续前进。

And then run another one, show it for 15 seconds and move on.

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

推荐答案

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

The only way to achieve that in pure CSS is to run all the animations at the same time and do some calculations:

• 每个动画的长度应该相同并等于所需动画的总长度（意思是如果你想要两个15秒的动画，CSS动画应该设置为30秒的长度，没有延迟）


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

一旦你看到它在行动中，它会更清楚：

It will be more clear once you see it in action here:

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

这篇关于如何一个接一个地播放不同的CSS动画？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！