在第一个元素消失后，如何使第二个元素出现？

Question

我想让第一个方块在3秒后出现，然后消失。消失后，第二个方块会在11秒后可见。如何使第二个方块仅在第一个方块消失11秒后才出现？

.one, .two{
  background-color: black;
  height: 50px;
	width: 50px;
}

.one{
  animation: fadein 3s, fadeout 7s ;
}


.two{
  animation: fadein 11s, fadeout 17s ;
}



@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

					<div class="one"></div>
          <br>
			    <div class="two"></div>

Answer 1

也许使用animation-delay？

还请注意，您不能在同一元素的多个关键帧中为相同的css属性设置动画。最后一个关键帧中定义的css将始终覆盖较早的css。您可以尝试使用％达到所需的目标。

.one, .two{
  background-color: black;
  height: 50px;
  width: 50px;
  opacity: 0;
}

.one{
  animation: fadeinout1 10s;
}

.two{
  animation: fadeinout2 28s ;
  animation-delay: 10s ;
}

@keyframes fadeinout1 {
  0%, 100% { opacity: 0; }
  30% { opacity: 1; } /*Simulate 3s, out of the whole animation of 10s*/
}

@keyframes fadeinout2 {
  0%, 100% { opacity: 0; }
  39% { opacity: 1; } /*Simulate 11s, out of the whole animation of 28s*/
}

<div class="one"></div>
    <br>
<div class="two"></div>