Khái quát
Ở thời điểm hiện tại, với một lượng website lớn khủng khiếp, bất cứ một doanh nghiệp nào từ lớn đến nhỏ đều sẽ có một website riêng. Thì sự đòi hỏi về chất lượng của các website ngày càng tăng. Một trong những sự đòi hỏi tiến bộ nhất đó chính là hiệu ứng animation của website.
Hiệu ứng animation của website sẽ giúp cho website trở nên thời thượng hơn, ấn tượng hơn trong mắt người xem.
Nhưng giữa việc tạo ra được một hiệu ứng animation và nguyên một trang web nhiều hiệu ứng animation là những chuyện hoàn toàn khác nhau. Vì nếu không cẩn thận cách viết hiệu ứng animation này sẽ khiến các file HTML CSS và Javascript trở nên lộn sộn, bừa bãi.
Hôm nay hãy cùng mình đi tìm hiểu về cách triển khai animation CSS sao cho thật đơn giản, hiệu quả, dề dùng và dể dàng tái sử dụng nhé.
Khai báo một animation CSS
Để có thể khai báo một animation ta phải sử dụng đến @keyframe trong CSS.
Trong keyframes có thể điền các giai đoạn bằng from và to hoặc các giai đoạn theo số liệu phần trăm.
Gọi một animation CSS
Cách nhanh gọn nhất trong việc khai báo animation trong CSS là sử dụng cách khai báo sau:
Animation: example 5s linear 2s infinite.
Với example là tên của animation được ghi ở keyframes.
5s là thời gian chạy một vòng của animation.
linear là hiệu ứng chạy của animation, với linear chính là mặc định kiểu chạy bình thường.
infinite chính là số lần chạy với infinite là chạy mãi không dừng lại. Nếu chỉ muốn chạy với một số lần nhất định có thể điền số đó vào.
Video hướng dẩn chi tiết
Hình ảnh minh họa sản phẩm sau video