使用CSS关键帧在内容之上无限播放动画 [英] Infinite animation of contents on top of each other using CSS keyframes

问题描述

我有以下 HTML 和 CSS 代码：

< pre class = snippet-code-css lang-css prettyprint-override> .parent {高度：10％;宽度：100％;向左飘浮;位置：相对；} .content1 {高度：100％；宽度：20％;背景颜色：蓝色；向左飘浮;位置：绝对；} .content2 {高度：100％；宽度：20％;背景颜色：红色；向左飘浮;动画延迟：1秒；位置：绝对；} .content3 {高度：100％;宽度：20％;背景颜色：黄色；向左飘浮;动画延迟：2秒；位置：绝对；} .content4 {高度：100％；宽度：20％;背景颜色：绿色；向左飘浮;动画延迟：3秒；位置：绝对；} .content5 {高度：100％；宽度：20％;背景颜色：橙色；向左飘浮; animation-delay：4s;} .parent div {animation-name：animation_01; animation-duration：2s; animation-iteration-count：infinite; animation-fill-mode：前进；不透明度：0; } @keyframes animation_01 {0％{opacity：0} 50％{opacity：1} 100％{opacity：0}}

 < div class = parent> < div class = content1>这是content1< / div> < div class = content2>这是content2< / div> < div class = content3>这是content3< / div> < div class = content4>这是content4< / div> < div class = content5>这是content5< / div> < / div>  

正如您在代码中看到的那样通过使用关键帧动画在彼此顶部显示5个内容。我想无限地运行此动画，因此我放入了 animation-iteration-count：infinite; 。

但是，一旦动画达到 content5 ，它就不会返回到 content1 并重新开始。相反，它只会返回到 content4 ，然后显示/隐藏 content4 和 content5 在无限循环中。

我必须在代码中进行哪些更改，以便动画返回到 content1 并重新开始动画？

解决方案

定义更长的动画。

此示例中的动画持续时间为5秒，可见时间范围为2秒。每个div都有不同的延迟，因此当其中一个淡出时，另一个开始淡入。

  .parent {高度：10％；宽度：100％;向左飘浮;位置：相对；}。parent div {animation-name：animation_01;动画时间：5秒； animation-iteration-count：无限； opacity：0;}。content1 {高度：100％;宽度：20％;背景颜色：蓝色；位置：绝对； opacity：1;}。content2 {height：100％;宽度：20％;背景颜色：红色；动画延迟：1秒；位置：绝对；}。content3 {高度：100％；宽度：20％;背景颜色：黄色；动画延迟：2秒；位置：绝对；}。content4 {高度：100％；宽度：20％;背景颜色：绿色；动画延迟：3秒；位置：绝对；}。content5 {高度：100％；宽度：20％;背景颜色：橙色； animation-delay：4s;}。parent {} @keyframes animation_01 {20％{opacity：1} 0％，40％，100％{opacity：0}}}}  

 < div class = parent> < div class = content1>这是content1< / div> < div class = content2>这是content2< / div> < div class = content3>这是content3< / div> < div class = content4>这是content4< / div> < div class = content5>此处为content5< / div>< / div>  

I have the following HTML and CSS code:

.parent{
 height: 10%;
 width: 100%;
 float: left;
 position: relative;
}
 
.content1{
 height: 100%;
 width: 20%;
 background-color: blue;
 float: left;
 position: absolute;
}
 
 .content2{
 height: 100%;
 width: 20%;
 background-color: red;
 float: left;
 animation-delay: 1s;
  position: absolute;
}
 
 .content3{ 
 height: 100%;
 width: 20%;
 background-color:yellow;
 float: left;
 animation-delay: 2s;
 position: absolute;
}
 
.content4{
 height: 100%;
 width: 20%;	
 background-color: green;
 float: left;
 animation-delay: 3s;
 position: absolute;
}
 
 .content5{
 height: 100%;
 width: 20%;
 background-color: orange;
 float: left;
 animation-delay: 4s;
}
 
 
.parent div {
 animation-name: animation_01;
 animation-duration:2s;
 animation-iteration-count:infinite;
 animation-fill-mode: forwards;
 opacity:0;
 }


@keyframes animation_01 {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

<div class="parent">
	<div class="content1">Here goes content1</div>
	<div class="content2">Here goes content2</div>
	<div class="content3">Here goes content3</div>
	<div class="content4">Here goes content4</div>
	<div class="content5">Here goes content5</div>
 </div>

As you can see in the code I display 5 contents on top of each other by using keyframes animation. I want to run this animation infinite therefore I put animation-iteration-count:infinite;.

However, once the animation reaches content5 it does not go back to content1 and starts all over again. Instead, it only goes back to content4 and then shows/hides content4 and content5 in an infinite loop.

What do I have to change in my code so the animation goes back to content1 and starts the animation all over again?

解决方案

Define a longer animation.

The animation duration in this example is 5 seconds and the visible time frame is 2 seconds. Each div has a different delay, so when one is being fade out the other starts to fade in.

.parent {
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  position: absolute;
  opacity: 1;
}

.content2 {
  height: 100%;
  width: 20%;
  background-color: red;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 20%;
  background-color: yellow;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 20%;
  background-color: green;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 20%;
  background-color: orange;
  animation-delay: 4s;
}

.parent {}

@keyframes animation_01 {
  20% {
    opacity: 1
  }
  0%, 40% , 100% {
    opacity: 0
  }
}


}

<div class="parent">
  <div class="content1">Here goes content1</div>
  <div class="content2">Here goes content2</div>
  <div class="content3">Here goes content3</div>
  <div class="content4">Here goes content4</div>
  <div class="content5">Here goes content5</div>
</div>

这篇关于使用CSS关键帧在内容之上无限播放动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！