How to make it so that only after the completion of the animation (keyframes) of one block does the second block appear? Can this be done only with the help of css?

    1 answer 1

    Use animation-delay :

    * { box-sizing: border-box; } html, body { padding: 0; margin: 0; } .box { width: 100px; height: 100px; margin: .5rem; } .box-1 { background: #03a8f3; animation: start 1s 0s linear both; } .box-2 { background: #e81e63; animation: start 1s 1s linear both; } .box-3 { background: #4cae50; animation: start 1s 2s linear both; } .box-show { width: 150px; height: 150px; opacity: 0; background: #fec007; animation: show 1s 3s linear both; } @keyframes start { to { transform: translateX(300px); } } @keyframes show { to { opacity:1; } } 
     <div class="wrap"> <div class="box box-1"></div> <div class="box box-2"></div> <div class="box box-3"></div> <div class="box box-show"></div> </div>