Animate.css đã xuất hiện được vài năm và tôi phải thừa nhận là đến bữa tiệc khá muộn. Tôi chỉ phát hiện ra nó một vài tháng trước trong khi tìm kiếm trên mạng một số hướng dẫn hoạt hình CSS và tìm thấy cách nhanh nhất, đơn giản nhất để tạo hiệu ứng xung quanh, Animate.css.
Được tạo bởi một anh chàng tên là Dan Eden, Animate.css là một cách nhanh chóng để xem CCS hoạt động như thế nào và có một số hành động hoạt hình trên trang web của bạn.
Được mô tả là 'Chỉ cần thêm hoạt hình CSS nước' Animate.css là một chút thú vị với một khía cạnh nghiêm túc. Nó cho phép ngay cả các nhà thiết kế web nghiệp dư như bản thân tôi cũng nhanh chóng nắm bắt được các nguyên tắc cơ bản của hoạt hình CSS và tạo hiệu ứng đơn giản nhưng hiệu quả cho các trang web. Từ một tiêu đề hoạt hình duy nhất đến các phong trào liên quan nhiều hơn, công cụ này có thể làm điều đó.
Animate.css
Animate.css có sẵn để tải xuống từ GitHub và về cơ bản là một thư viện các hiệu ứng CSS đơn giản được thu thập ở một nơi. Mỗi hình ảnh động được đóng gói độc đáo và sẵn sàng để sử dụng. Tất cả bạn cần làm là tìm hoạt hình bạn thích và áp dụng lớp. Đó thực sự là tất cả để có nó.
Bạn không cần phải tải xuống toàn bộ thư viện nếu bạn không muốn vì có 2.500 dòng mã trong đó. Bạn có thể truy cập trang web Animate.css, tìm hình động và nhấp vào liên kết Tải xuống Animate.css. Nó tải lớp lên một trang web để bạn sao chép và sử dụng khi bạn thấy phù hợp.
Sử dụng GitHub dễ dàng hơn và đi sâu vào để tìm hiệu ứng bạn đang tìm kiếm.
- Điều hướng đến trang GssHub css.
- Nhấp vào liên kết Nguồn để truy cập danh sách các yếu tố.
- Chọn loại hiệu ứng bạn đang tìm kiếm từ danh sách. Bounce là một công cụ tìm kiếm sự chú ý, vì vậy hãy chọn liên kết chú ý.
- Chọn thư bị trả lại.
- Sao chép mã và đặt nó vào trang của bạn để áp dụng hình ảnh động.
Nó thật sự đơn giản. Rõ ràng bạn sẽ chọn các tùy chọn khác nhau cho các hiệu ứng khác nhau nhưng kết quả cuối cùng là như nhau. Truy cập vào mã cần thiết để thực hiện việc nâng vật nặng trên trang.
Xây dựng một đối tượng hoạt hình với Animate.css
Xây dựng một cái gì đó tuyệt vời với Animate.css rất đơn giản. Đó chỉ là vấn đề tìm mã CCS và thêm nó vào CSS của riêng bạn. Nếu tôi có thể làm điều đó, bất cứ ai cũng có thể!
Tùy chọn đầu tiên trên trang Animate.css bị trả lại, vì vậy chúng ta hãy sử dụng nó trong ví dụ này.
- Dán ' ' phía trong trong bản định kiểu của bạn.
- Tìm CSS cho hình ảnh động bạn muốn và thêm nó vào phần tử bạn muốn tạo hiệu ứng. Ví dụ: thêm ' 'để thêm hiệu ứng thoát đó để kiểm tra, hình ảnh hoặc bất cứ điều gì.
- Thêm mã CSS sau để làm cho tất cả hoạt động. Lấy từ các thư bị trả lại ở trên.
@keyframes nảy {
từ, 20%, 53%, 80%, đến {
hoạt hình-thời gian-chức năng: khối-bezier (0, 215, 0, 610, 0, 355, 1.000);
biến đổi: translate3d (0, 0, 0);
}
40%, 43% {
hoạt hình-thời gian-chức năng: khối-bezier (0, 755, 0, 050, 0, 855, 0, 060);
biến đổi: translate3d (0, -30px, 0);
}
70%
hoạt hình-thời gian-chức năng: khối-bezier (0, 755, 0, 050, 0, 855, 0, 060);
biến đổi: translate3d (0, -15px, 0);
}
90% {
biến đổi: translate3d (0, -4px, 0);
}
}
.bounce {
tên hoạt hình: bị trả lại;
biến đổi-nguồn gốc: trung tâm đáy;
}
Đưa hoạt hình hơn nữa với Animate.css
Trình tự trên cho biết thêm hiệu ứng thoát khi trang tải lần đầu tiên, điều này tuyệt vời nhưng chỉ là một lần. Làm thế nào về chúng tôi thêm nó để di chuột. Bằng cách đó, bất cứ khi nào ai đó di chuyển qua bài kiểm tra, nó sẽ bị trả lại. Đó không phải là điều tôi sẽ làm trên một trang web sản xuất, nhưng đó là một cách tuyệt vời để chứng minh mọi thứ hoạt động như thế nào.
Thêm mã sau vào CSS của bạn để thêm độ nảy trên hiệu ứng di chuột. Mỗi khi chuột di chuyển qua phần tử, nó sẽ nảy lên.
.animated: di chuột {
-webkit-animation-thời gian: 1s;
-moz-hoạt hình-thời lượng: 1s;
-ms-animation-thời gian: 1s;
-o-hoạt hình-thời lượng: 1s;
thời lượng hoạt hình: 1s;
-webkit-animation-fill-mode: cả hai;
-moz-animation-fill-mode: cả hai;
-ms-animation-fill-mode: cả hai;
-o-animation-fill-mode: cả hai;
hoạt hình-điền-chế độ: cả hai;
}
Nếu bạn biết CSS, bạn sẽ biết nhiều hơn tôi về cách triển khai các hiệu ứng khác nhau cho các hành động khác nhau. Khi mới bắt đầu, thư viện này và các thư viện được cung cấp trong Animate.css giúp tôi tạo các hoạt hình cơ bản nhưng hiệu quả cho các trang web của mình.
Tôi không biết có bao nhiêu tôi sẽ sử dụng trên một trang web trực tiếp vì chúng không luôn bị hỏng quá nhiều và người dùng di động dường như không thích chúng nhiều. Tuy nhiên, như một bài học về cách CSS hoạt động và cách nó có thể được sử dụng để cải thiện web, đó là một tài nguyên tuyệt vời. Tôi chỉ là người mới bắt đầu nhưng thậm chí dành vài giờ với Animate.css cho hướng dẫn này đã dạy tôi rất nhiều. Tôi nghĩ rằng tôi sẽ chơi với nó nhiều hơn nữa trước khi tôi hoàn thành. Còn bạn thì sao?
