使用 CSS 关键帧显示一个又一个内容

Question

我有以下HMTL 和CSS：

.parent{
 height: 10%;
 width: 100%;
 float: left;	 
}
 
.content1{
 height: 100%;
 width: 20%;
 background-color: blue;
 float: left;
}
 
 .content2{
 height: 100%;
 width: 20%;
 background-color: red;
 float: left;
}
 
 .content3{ 
 height: 100%;
 width: 20%;
 background-color:yellow;
 float: left;
}
 
.content4{
 height: 100%;
 width: 20%;	
 background-color: green;
 float: left;
}
 
 .content5{
 height: 100%;
 width: 20%;
 background-color: orange;
 float: left;
}
 
 
 
.parent {
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
 }


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

}

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

此代码本身可以正常工作。
您也可以在 JSfiddle here 中找到它。

---

我现在的目标是一个接一个地显示content1 到content5。因此，我想在 CSS 的 animation 中使用 opacity 函数。但是，我还不知道如何将opacity 用于单个内容，因为现在动画只针对所有五个内容组合运行。

你知道是否有可能让这个动画在@keyframes 中工作，还是我需要像示例here 中那样的javascript/jQuery？

Answer 1

您需要为每个 div 设置动画。您可以对所有人使用相同的动画。对于每个 div 集 animation-delay。这是您在问题中定义的动画的示例：

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

.parent div {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  float: left;
}

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

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

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

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

.parent {}

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


}

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

或者如果您希望每个项目仅显示 1 秒，例如：

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

.parent div {
  animation-name: animation_01;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

.content1 {
  height: 100%;
  width: 20%;
  background-color: blue;
  float: left;
}

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

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

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

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

.parent {}

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

更新

要在另一个之上显示它们，请设置父级position:relative 和具有position: absolute 的子级

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

.parent div {
  animation-name: animation_01;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

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

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

Answer 2

想法是将动画添加到子元素而不是父元素上，并添加animation-delay 以延迟每个动画的开始时间（这在使用 sass 时要容易得多）

.parent{
 height: 10%;
 width: 100%;
 float: left;	 
}
 
.content1{
 height: 100%;
 width: 20%;
 background-color: blue;
 float: left;

 
}
 
 .content2{
 height: 100%;
 width: 20%;
 background-color: red;
 float: left;
 animation-delay:.4s;
}
 
 .content3{ 
 height: 100%;
 width: 20%;
 background-color:yellow;
 float: left;
  animation-delay:.8s;
}
 
.content4{
 height: 100%;
 width: 20%;	
 background-color: green;
 float: left;
  animation-delay:1.2s;
}
 
 .content5{
 height: 100%;
 width: 20%;
 background-color: orange;
 float: left;
  animation-delay:1.6s;
}
 
 
 

 .parent div{
 animation-name: animation_01;
 animation-duration:5s;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
 opacity:0;
}

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

}

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