Thứ ba.css là Thư viện hoạt hình nóng nhất ngay bây giờ
Bây giờ bạn đã quen thuộc với Animate.css như thư viện hoạt hình chính giữa các nhà thiết kế web.
Nhưng có một đứa trẻ mới trong khối có tên Thứ ba, và nó lấy hoạt hình web bằng vũ lực.
Thư viện mới này không khác nhiều về định dạng hoặc cách thực hiện. Nhưng thứ ba đến với một số ít hình ảnh động CSS mới rằng bạn không thể tìm thấy bất cứ nơi nào khác.
Những hiệu ứng mới này là tinh tế hơn nhiều trong tự nhiên vì vậy họ thực sự hòa trộn vào một trang độc đáo. Đây là một danh sách nhỏ các hiệu ứng bạn có thể chọn từ:
- Làm mờ dần và mở rộng
- Làm mờ dần và co lại
- Đóng dấu & nảy
- Xích đu
- Thả vào từ trái / phải
- Bí đao / căng
- Bản lề
Nếu bạn xem qua danh sách này trên trang demo, bạn sẽ nhận thấy rằng tất cả các hiệu ứng đều có một điểm chung: vật lý.
Tất cả họ đều cảm thấy rất thực tế đến những điều cơ bản của vật lý, và họ dường như tuân theo định luật hấp dẫn. Không có hình ảnh nào trong số này là quá đỉnh hoặc không liên quan. Họ tinh tế nhưng đáng chú ý và quan trọng hơn, họ đáng tin.
Tôi nghĩ thứ ba là một trong những thư viện hoạt hình CSS hiện đại tốt nhất bởi vì nó trình bày một cái nhìn thực tế về hoạt hình web.
Chúng ta không nên thiết kế các hiệu ứng giao diện điên rồ nổi bật như ngón tay cái đau. Tinh tế luôn luôn là tên của trò chơi bởi vì nó tạo cảm giác tương tác từ bất kỳ mục nhập nào của người dùng cho dù đó là nhấp chuột hay cuộn.
Những rắc rối đã luôn luôn được viết những hình ảnh động này từ đầu và làm cho chúng trông vừa phải. Nhưng bây giờ với thứ ba, những lo lắng của bạn có thể bay ra khỏi cửa.
Chỉ tải xuống một bản sao từ GitHub và thêm .css gửi đến trang của bạn. Bạn thực sự có thể sử dụng phiên bản CDN trực tiếp từ GitHub nếu bạn không muốn tải xuống bất cứ thứ gì tại địa phương.
Khi điều này được thêm vào trang web của bạn, chỉ cần nối thêm .animate lớp cùng với bất kỳ lớp độc quyền nào được liệt kê trong repo GitHub. Mã của bạn có thể trông giống như thế này:
Hôm nay là thứ ba.
Hãy nhìn vào tài liệu đầy đủ nhìn một danh sách tất cả các lớp hoạt hình vào / ra.
Nếu bạn làm việc với JavaScript, bạn cũng có thể thêm các lớp này một cách linh hoạt trên các sự kiện click / hover. Bằng cách này, bạn chỉ có thể thêm lớp animate khi người dùng nhấp vào nút, dường như sẽ hoạt hình khi nhấp vào.
Có rất nhiều thứ bạn có thể làm vào thứ ba và đó thực sự là Animate.css mới cho hoạt hình UI thực dụng.
Hãy nhìn vào trang demo để thấy nó hoạt động và bạn có thể tìm hiểu thêm bằng cách đọc qua “trong quá trình làm” bài đăng trong đó nói về cách nhóm Shakr tạo ra hôm thứ ba.
