Animation Web design CSS only - Effect Gen animation

    Trong Series animation Web design cho người mới bắt đầu với ngôn ngữ chính là CSS 

Kênh youtube của mình đang xây dựng gồm 2 chủi series:

- Series chia sẽ code animation website design thông qua các project cho người đã có căn bản 

- Series chia sẽ code animation website design  thông qua các bài tập nhỏ cho người mới bắt đầu ( rất chi tiết)

Chỉ cần sử dụng vài dòng CSS chúng ta củng có thể tạo ra hiệu ứng vòng lặp như những hình thù biến đổi GEN. Chỉ cần duy nhất một animation kết hợp với animation-delay để trì hoãn những hiệu ứng sau. 

Sử dụng bảng mã màu nóng, quá trình thực hiện được mô tả như sau:

Bạn muốn phát sinh ra bao nhiêu hàng cho bộ GEN thì hãy làm bấy nhiêu item. 

Mỗi item sẽ tương ứng với một dấu chấm. Vậy dâu chấm còn lại ở đâu, thật ra vẩn trong item, chúng ta sẽ sử dụng before để tạo ra nó.

Bây giờ khi có một hiệu ứng animation vào item di chuyển về bên phải, ta lại tạo 1 keyframe animation vào before quay ngược vào bên trái. Nhờ đó mà nó sẽ giao nhau ở giửa.

Các dòng khác làm tương tự nhưng cứ mỗi dòng lại chậm đi 0.2s sẽ tạo ra được hiệu ứng GEN.

Xem video hướng dẩn: