Nhờ giúp đỡ về animation trong CSS

Có bạn nào rảnh không ? hộ mình với ạ

Bạn nào rành … giúp mình với ạ … híc híc

hơn 3 chục lượt xem rồi mà vẫn chưa thấy ai vào comment hết … các cao thủ đâu … xin gúp mình với ạ

E là phải đụng Javascript rồi.

https://codepen.io/anon/pen/pLGqaQ

Thử thuộc tính delay coi được không
Box 1 delay 0s
Box 2 delay 5s
Box 3 delay 10s

.your-box {
  animation-delay: 5s;
  transition-delay: 5s;
}

E là phải đụng Javascript rồi.

https://codepen.io/anon/pen/pLGqaQ

Được rồi anh hén … tuy nhiên nó chưa được mượt mà lắm ạ, e mún thời gian xuất hiện và biến mất của mỗi box diễn ra nhanh hơn chút xíu (ở đây e thấy anh để kéo dài ) và cái thời gian tồn tại của chúng kéo dài khoảng 5s, ở đây e thấy nó vừa xuất hiện xong đã biến mất tiêu rồi.

làm bằng JS cũng được ạ … anh có thể chỉnh lại giúp e với được không anh. E cám ơn anh nhiều

Ở animation thêm animation-fill-mode: forwards; để style được giữ sau khi animation hoàn thành.
Và ở phần animationend event bạn sửa thành setTimeout là ra
box1.addEventListener("animationend", () => setTimeout(() => add(box2, "ani2"), 5000)); //5000 = 5s

Thử xem có đúng yêu cầu không:

.box1{
  background:red;
  animation:name1 6s infinite;
}
.box2{
  background:blue;
  animation:name2 6s infinite;
}
.box3{
  background:green;
  animation:name3 6s infinite;
}


@keyframes name1{
  0%{
    top:-100%;
    opacity:1
  }
  30%{
    top:50%
  } 
  33.33%{
    top:50%;
    opacity:1
  } 
  34%{
    opacity:0
  }  
  100%{
    opacity:0
  }
}

@keyframes name2{
  0%{
    left:-100%;
    opacity:1
  }
  33.3%{
    left:-100%
  }
  60%{
    left:50%
  }
  66.67%{
    left:50%;
    opacity:1
  }
  67%{
    opacity:0
  }
  100%{
    opacity:0
  }
}
@keyframes name3{
  0%{
    left:200%;
    opacity:1
  }
  
  66.67%{
    left:200%;
    opacity:1
  }
  100%{
    left:50%;
  }
}