Is there a way to delay the appearance of the second square until after the first square has disappeared? For example, I want the first square to appear after 3 seconds and then disappear, followed by the second square becoming visible after 11 seconds.
.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>