sinh động. css v4 mang đến một số thay đổi đột phá, vui lòng tham khảo trước khi cập nhật từ v3. x trở xuống sinh động. css là một thư viện gồm các hình ảnh động trên nhiều trình duyệt, sẵn sàng sử dụng để sử dụng trong các dự án web của bạn. Tuyệt vời để nhấn mạnh, trang chủ, thanh trượt và gợi ý hướng dẫn sự chú ý Chỉnh sửa cái này trên GitHub Cài đặt và sử dụngcài đặtCài đặt với npm $ npm install animate.css --save
Hoặc cài đặt với Sợi (điều này sẽ chỉ hoạt động với công cụ thích hợp như Webpack, Parcel, v.v. Nếu bạn không sử dụng bất kỳ công cụ nào để đóng gói hoặc đóng gói mã của mình, bạn chỉ cần sử dụng phương pháp CDN bên dưới) $ yarn add animate.css
Nhập nó vào tập tin của bạn import 'animate.css';
Hoặc thêm nó trực tiếp vào trang web của bạn bằng CDN <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
sử dụng cơ bảnSau khi cài đặt Animate. css, hãy thêm lớp import 'animate.css';
8 vào một phần tử, cùng với bất kỳ phần tử nào (đừng quên tiền tố import 'animate.css';
9. )<h1 class="animate__animated animate__bounce">An animated element</h1>
Đó là nó. Bạn đã có một yếu tố động CSS. siêu Ảnh động có thể cải thiện UX của giao diện, nhưng hãy nhớ rằng chúng cũng có thể cản trở người dùng của bạn. Vui lòng đọc các phần và để đưa các trang web của bạn vào cuộc sống theo cách tốt nhất có thể
Sử dụng <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
0Mặc dù thư viện cung cấp cho bạn một vài lớp trợ giúp như lớp <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
1 để giúp bạn chạy nhanh, nhưng bạn có thể trực tiếp sử dụng các hoạt ảnh được cung cấp <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
2. Điều này cung cấp một cách linh hoạt để sử dụng Animate. css với các dự án hiện tại của bạn mà không cần phải cấu trúc lại mã HTML của bạnThí dụ $ yarn add animate.css
0Xin lưu ý rằng một số hoạt ảnh phụ thuộc vào thuộc tính <head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
3 được đặt trên lớp của hoạt ảnh. Thay đổi hoặc không khai báo có thể dẫn đến kết quả không mong muốnThuộc tính tùy chỉnh CSS (Biến CSS)Kể từ phiên bản 4, Animate. css sử dụng các thuộc tính tùy chỉnh (còn được gọi là biến CSS) để xác định thời lượng, độ trễ và số lần lặp của hoạt ảnh. Điều này làm cho Animate. css rất linh hoạt và có thể tùy chỉnh. Cần thay đổi thời lượng hoạt hình? Thí dụ $ yarn add animate.css
2Các thuộc tính tùy chỉnh cũng giúp bạn dễ dàng thay đổi nhanh chóng tất cả các thuộc tính giới hạn thời gian của hoạt ảnh. Điều đó có nghĩa là bạn có thể tạo hiệu ứng chuyển động chậm hoặc tua nhanh thời gian bằng một lớp lót javascript $ yarn add animate.css
3Mặc dù một số trình duyệt cũ không hỗ trợ thuộc tính tùy chỉnh, Animate. css cung cấp một dự phòng thích hợp, mở rộng hỗ trợ cho bất kỳ trình duyệt nào hỗ trợ hoạt ảnh CSS Chỉnh sửa cái này trên GitHub lớp học tiện íchsinh động. css đi kèm với một vài lớp tiện ích để đơn giản hóa việc sử dụng nó trì hoãn lớp họcBạn có thể thêm độ trễ trực tiếp vào thuộc tính lớp của phần tử, giống như thế này $ yarn add animate.css
4sinh động. css cung cấp các độ trễ sau Tên lớpThời gian trì hoãn mặc định<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
4<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
5<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
6<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
7<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
8<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
9<h1 class="animate__animated animate__bounce">An animated element</h1>
0<h1 class="animate__animated animate__bounce">An animated element</h1>
1Độ trễ được cung cấp là từ 1 đến 5 giây. Bạn có thể tùy chỉnh chúng, đặt thuộc tính <h1 class="animate__animated animate__bounce">An animated element</h1>
2 thành thời lượng dài hơn hoặc ngắn hơnimport 'animate.css';
4Các lớp chậm, chậm hơn, nhanh và nhanh hơnBạn có thể kiểm soát tốc độ của hoạt ảnh bằng cách thêm các lớp này, như bên dưới $ yarn add animate.css
0Tên lớp Thời gian tốc độ mặc định<h1 class="animate__animated animate__bounce">An animated element</h1>
3<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
5<h1 class="animate__animated animate__bounce">An animated element</h1>
5<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
7<h1 class="animate__animated animate__bounce">An animated element</h1>
7<h1 class="animate__animated animate__bounce">An animated element</h1>
8<h1 class="animate__animated animate__bounce">An animated element</h1>
9$ yarn add animate.css
00Lớp import 'animate.css';
8 có tốc độ mặc định là $ yarn add animate.css
02. Bạn cũng có thể tùy chỉnh thời lượng hoạt ảnh thông qua thuộc tính $ yarn add animate.css
03, trên toàn cầu hoặc cục bộ. Điều này sẽ ảnh hưởng đến cả hoạt ảnh và các lớp tiện ích. Thí dụ$ yarn add animate.css
1Lưu ý rằng một số hoạt ảnh có thời lượng dưới 1 giây. Khi chúng tôi sử dụng hàm CSS $ yarn add animate.css
04, việc đặt thời lượng thông qua thuộc tính $ yarn add animate.css
05 sẽ tôn trọng các tỷ lệ này. Vì vậy, khi bạn thay đổi thời lượng chung, tất cả các hoạt ảnh sẽ phản ứng với thay đổi đócác lớp học lặp đi lặp lạiBạn có thể kiểm soát số lần lặp lại của hoạt ảnh bằng cách thêm các lớp này, như bên dưới $ yarn add animate.css
2Tên lớpSố lần lặp mặc định$ yarn add animate.css
06$ yarn add animate.css
07$ yarn add animate.css
08$ yarn add animate.css
09$ yarn add animate.css
20$ yarn add animate.css
21$ yarn add animate.css
22$ yarn add animate.css
23Như với các lớp độ trễ và tốc độ, lớp $ yarn add animate.css
24 dựa trên thuộc tính $ yarn add animate.css
25 và có số lần lặp mặc định là $ yarn add animate.css
07. Bạn có thể tùy chỉnh chúng bằng cách đặt thuộc tính $ yarn add animate.css
25 thành giá trị dài hơn hoặc ngắn hơn$ yarn add animate.css
3Lưu ý rằng $ yarn add animate.css
22 không sử dụng bất kỳ thuộc tính tùy chỉnh nào và các thay đổi đối với $ yarn add animate.css
25 sẽ không có hiệu lực. Đừng quên đọc phần này để tận dụng hiệu quả nhất các hoạt ảnh lặp lạiChỉnh sửa cái này trên GitHub Thực hành tốt nhấtẢnh động có thể cải thiện đáng kể UX của giao diện, nhưng điều quan trọng là phải tuân theo một số nguyên tắc để không lạm dụng nó và làm giảm trải nghiệm người dùng trên các trang web của bạn. Thực hiện theo các quy tắc sau sẽ cung cấp một khởi đầu tốt ảnh động ý nghĩaBạn nên tránh tạo hiệu ứng động cho một phần tử chỉ vì lợi ích của nó. Hãy nhớ rằng hoạt ảnh nên làm rõ ý định. Nên sử dụng các hoạt ảnh như người tìm kiếm sự chú ý (nảy lên, nhấp nháy, xung, v.v.) để thu hút sự chú ý của người dùng vào một điều gì đó đặc biệt trong giao diện của bạn chứ không chỉ là một cách để mang lại sự "hào nhoáng" cho giao diện đó Hoạt ảnh vào và ra nên được sử dụng để định hướng những gì đang xảy ra trong giao diện, báo hiệu rõ ràng rằng nó đang chuyển sang trạng thái mới Điều đó không có nghĩa là bạn nên tránh thêm tính khôi hài vào giao diện, chỉ cần đảm bảo rằng hoạt ảnh không cản trở người dùng của bạn và hiệu suất của trang không bị ảnh hưởng bởi việc sử dụng quá mức hoạt ảnh Không làm động các phần tử lớnTránh nó vì nó sẽ không mang lại nhiều giá trị cho người dùng và có thể sẽ chỉ gây nhầm lẫn. Bên cạnh đó, rất có thể các hoạt ảnh sẽ lộn xộn, dẫn đến trải nghiệm người dùng tồi Không làm động các phần tử gốcCó thể tạo hoạt ảnh cho các thẻ $ yarn add animate.css
30 hoặc $ yarn add animate.css
31, nhưng bạn nên tránh. Có một số báo cáo chỉ ra rằng điều này có thể gây ra một số lỗi trình duyệt kỳ lạ. Bên cạnh đó, làm cho toàn bộ trang bị trả lại sẽ khó mang lại giá trị tốt cho UX của bạn. Nếu bạn thực sự cần loại hiệu ứng này, hãy bọc trang của bạn trong một thành phần và tạo hoạt ảnh cho nó, như thế này$ yarn add animate.css
4Hình ảnh động vô hạn nên tránhMặc dù Animate. css cung cấp các lớp tiện ích để lặp lại hoạt ảnh, bao gồm cả hoạt ảnh vô hạn, bạn nên tránh hoạt ảnh vô tận. Nó sẽ chỉ khiến người dùng của bạn mất tập trung và có thể làm phiền một phần tốt trong số họ. Vì vậy, hãy sử dụng nó một cách khôn ngoan Lưu ý trạng thái ban đầu và cuối cùng của các yếu tố của bạnTất cả hoạt hình. hoạt ảnh css bao gồm thuộc tính CSS có tên là $ yarn add animate.css
32, thuộc tính này kiểm soát trạng thái của một phần tử trước và sau hoạt ảnh. Bạn có thể đọc thêm về nó ở đây. sinh động. css mặc định là $ yarn add animate.css
33, nhưng bạn có thể thay đổi nó cho phù hợp với nhu cầu của mìnhKhông tắt truy vấn phương tiện $ yarn add animate.css
34Kể từ phiên bản 3. 7. 0 sinh động. css hỗ trợ truy vấn phương tiện $ yarn add animate.css
34 vô hiệu hóa hoạt ảnh dựa trên tùy chọn của hệ điều hành đối với các trình duyệt hỗ trợ (hầu hết các trình duyệt hiện tại đều hỗ trợ nó). Đây là một tính năng trợ năng quan trọng và không bao giờ được tắt. Điều này được tích hợp trong các trình duyệt để giúp những người bị rối loạn tiền đình và động kinh. Bạn có thể đọc thêm về nó ở đây. Nếu trang web của bạn cần hoạt ảnh để hoạt động, hãy cảnh báo người dùng nhưng không tắt tính năng này. Bạn có thể làm điều đó một cách dễ dàng chỉ với CSS. Đây là một ví dụ đơn giảnXem truy vấn phương tiện Ưu tiên bút-giảm-chuyển động của Elton Mesquita (@eltonmesquita) trên CodePen GotchasBạn không thể làm động các phần tử nội tuyếnMặc dù một số trình duyệt có thể tạo hoạt ảnh cho các thành phần nội tuyến, nhưng điều này đi ngược lại thông số kỹ thuật hoạt hình CSS và sẽ bị hỏng trên một số trình duyệt hoặc cuối cùng ngừng hoạt động. Luôn làm động các phần tử cấp độ khối hoặc khối nội tuyến (các thùng chứa lưới và flex và phần tử con cũng là các phần tử cấp độ khối). Bạn có thể đặt một phần tử thành $ yarn add animate.css
36 khi tạo hoạt ảnh cho một phần tử cấp độ nội tuyếnTràn raHầu hết các Animate. hoạt hình css sẽ di chuyển các thành phần trên màn hình và có thể tạo thanh cuộn trên trang web của bạn. Điều này có thể quản lý được bằng cách sử dụng thuộc tính $ yarn add animate.css
37. Không có công thức để sử dụng nó khi nào và ở đâu, nhưng ý tưởng cơ bản là sử dụng nó trong cha mẹ giữ phần tử hoạt hình. Tùy thuộc vào bạn để tìm ra thời điểm và cách sử dụng nó, hướng dẫn này có thể giúp bạn hiểu nóKhoảng cách giữa các lần lặp lạiThật không may, điều này không thể thực hiện được với CSS thuần túy ngay bây giờ. Bạn phải sử dụng Javascript để đạt được kết quả này Chỉnh sửa cái này trên GitHub Sử dụng với JavascriptBạn có thể làm rất nhiều thứ khác với animate. css khi bạn kết hợp nó với Javascript. Một ví dụ đơn giản $ yarn add animate.css
5Bạn có thể phát hiện khi một hoạt ảnh kết thúc $ yarn add animate.css
6hoặc thay đổi thời lượng của nó $ yarn add animate.css
7Bạn cũng có thể sử dụng một chức năng đơn giản để thêm các lớp hoạt hình và tự động xóa chúng $ yarn add animate.css
8Và sử dụng nó như thế này $ yarn add animate.css
9Nếu bạn gặp khó khăn trong việc hiểu chức năng trước đó, hãy xem const, classList, arrow functions và Promises Chỉnh sửa cái này trên GitHub Di chuyển từ v3. x trở xuốngsinh động. css v4 đã mang lại một số cải tiến, hoạt ảnh được cải thiện và hoạt ảnh mới, khiến nó đáng để nâng cấp. Tuy nhiên, nó cũng đi kèm với một sự thay đổi đột phá. chúng tôi đã thêm một tiền tố cho tất cả các Animate. css - mặc định là import 'animate.css';
9 - vì vậy không thể di chuyển trực tiếpNhưng không sợ. Mặc dù bản dựng mặc định, $ yarn add animate.css
39, mang tiền tố import 'animate.css';
9, chúng tôi cũng cung cấp tệp $ yarn add animate.css
41 hoàn toàn không mang tiền tố, giống như các phiên bản trước (3. x trở xuống)Nếu bạn đang sử dụng gói, hãy cập nhật quá trình nhập của bạn từ import 'animate.css';
0đến import 'animate.css';
1Lưu ý rằng tùy thuộc vào cấu hình dự án của bạn, điều này có thể thay đổi một chút Trong trường hợp sử dụng CDN, hãy cập nhật liên kết trong HTML của bạn từ import 'animate.css';
2đến import 'animate.css';
3Trong trường hợp của một dự án mới, bạn nên sử dụng phiên bản có tiền tố mặc định vì nó sẽ đảm bảo rằng bạn sẽ khó có các lớp xung đột với dự án của mình. Ngoài ra, trong các phiên bản sau, chúng tôi có thể quyết định ngừng cung cấp tệp $ yarn add animate.css
41Chỉnh sửa cái này trên GitHub Bản dựng tùy chỉnhKhông thể xây dựng tùy chỉnh từ thư mục node_modules vì chúng tôi không gửi các công cụ xây dựng trong mô-đun npm sinh động. css được cung cấp bởi npm, postcss + postcss-preset-env, có nghĩa là bạn có thể tạo các bản dựng tùy chỉnh khá dễ dàng, sử dụng CSS trong tương lai với các dự phòng phù hợp Trước hết, bạn sẽ cần Node và tất cả các phụ thuộc khác import 'animate.css';
4Tiếp theo, hãy chạy $ yarn add animate.css
43 để biên dịch bản dựng tùy chỉnh của bạn. Ba tệp sẽ được tạo$ yarn add animate.css
44. bản dựng thô, dễ đọc và không có bất kỳ tối ưu hóa nào$ yarn add animate.css
39. xây dựng rút gọn đã sẵn sàng để sản xuất$ yarn add animate.css
41. bản dựng rút gọn đã sẵn sàng để sản xuất mà không cần tiền tố lớp. Điều này chỉ nên được sử dụng như một đường dẫn dễ dàng cho việc di chuyển
Ví dụ: nếu bạn chỉ sử dụng một số hoạt ảnh "người tìm kiếm sự chú ý", chỉ cần chỉnh sửa tệp $ yarn add animate.css
47, xóa mọi $ yarn add animate.css
48 và những hoạt ảnh bạn muốn sử dụngimport 'animate.css';
5Bây giờ, chỉ cần chạy $ yarn add animate.css
43 và bản dựng được tối ưu hóa cao của bạn sẽ được tạo ở thư mục gốc của dự ánThay đổi tiền tố mặc địnhThật dễ dàng để thay đổi tiền tố của animate trên bản dựng tùy chỉnh của bạn. Thay đổi thuộc tính ________ 241 của ________ 240 trong tệp ________ 242 và xây dựng lại thư viện với $ yarn add animate.css
43import 'animate.css';
6sau đó import 'animate.css';
7Dễ như ăn bánh Chỉnh sửa cái này trên GitHub khả năng tiếp cậnsinh động. css hỗ trợ truy vấn phương tiện $ yarn add animate.css
34 để người dùng nhạy cảm với chuyển động có thể chọn không tham gia hoạt ảnh. Trên các nền tảng được hỗ trợ (hiện tại là tất cả các trình duyệt và hệ điều hành chính, bao gồm cả thiết bị di động), người dùng có thể chọn "giảm chuyển động" trên tùy chọn hệ điều hành của họ và thao tác này sẽ tắt chuyển đổi CSS cho họ mà không cần thực hiện thêm bất kỳ thao tác nàoChỉnh sửa cái này trên GitHub Đội ngũ nòng cốtDaniel EdenElton MesquitaWaren GonzagaAnimate. css CreatorMaintainerNgười đóng góp chínhChỉnh sửa cái này trên GitHub Giấy phép và đóng gópsinh động. css được cấp phép theo Giấy phép Hippocrates Đóng gópYêu cầu kéo là cách để đi đến đây. Chúng tôi chỉ có hai quy tắc để gửi yêu cầu kéo. khớp với quy ước đặt tên (camelCase, được phân loại [mờ dần, bị trả lại, v.v. ]) và cho chúng tôi xem bản trình diễn hoạt hình được gửi bằng bút. Điều cuối cùng đó là quan trọng quy tắc ứng xửDự án này và mọi người tham gia dự án được điều chỉnh bởi Quy tắc ứng xử của Giao ước cộng tác viên. Bằng cách tham gia, bạn phải duy trì mã này. Vui lòng báo cáo hành vi không được chấp nhận tới animate@eltonmesquita. com |