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

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将始终覆盖前面的那些。您可以尝试使用%来实现与您想要的类似的目标。

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