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

Thinh_Minh_Ha · April 10, 2018, 4:35am

Nhờ mọi người giúp mình về animation trong CSS với ạ.

Ở đây mình có 3 box : box1 (đỏ) , box2(blue), box3(green).

Mình muốn làm hiệu ứng animation lần lượt cho từng box thế này:

box1 : sẽ chạy từ trên xuống chính giữa bố cục và nó đứng im ở đó khoảng 3- 5 s sau đó biến mất.

Tiếp theo: khi box1 biến mất thì box2 chạy từ trái vào chính giữa bỗ cục và cũng đứng đó khoảng 3 - 5s
rồi cuối cùng là box thứ 3, khi box 2 biến mất thì box 3 chạy từ phải qua và đứng ở chính giữa bố cục 3-5s rồi biến mất để box 1 lại xuất hiện …

Hiệu ứng cứ tuần tự lặp lại như vậy. Mọi người giúp mình với ạ, ở đây mình đã dựng sẵn bỗ cục rồi ạ

========================
Cám ơn mọi người nhiều !

Thinh_Minh_Ha · April 10, 2018, 6:35am

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

Thinh_Minh_Ha · April 10, 2018, 8:04am

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

Thinh_Minh_Ha · April 10, 2018, 1:13pm

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 ạ

drgnz · April 10, 2018, 3:02pm

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

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

anhthu · April 10, 2018, 2:58pm

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;
}

Thinh_Minh_Ha · April 11, 2018, 1:57am

Đượ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

drgnz · April 11, 2018, 5:00am

Ở 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

Evil_Artist · April 11, 2018, 5:36am

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%;
  }
}