Cài đặt và sử dụng

cài đặt

Cà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

sử dụng cơ bản

Sau khi cài đặt Animate. css, thêm lớp

import 'animate.css';

import 'animate.css';

An animated element

Đó 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 thực tiễn tốt nhất và vấn đề cần giải quyết để đưa các nội dung web của bạn vào cuộc sống theo cách tốt nhất có thể

Sử dụng

0

Mặc dù thư viện cung cấp cho bạn một số lớp trợ giúp như lớp

Thí dụ

$ yarn add animate.css

Xin lưu ý rằng một số hoạt ảnh phụ thuộc vào thuộc tính

Thuộ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

Cá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

Mặ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 ích

sinh độ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ọc

Bạ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

sinh động. css cung cấp các độ trễ sau

An animated element

An animated element

Độ 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

An animated element

import 'animate.css';

Các lớp chậm, chậm hơn, nhanh và nhanh hơn

Bạ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

An animated element

An animated element

An animated element

An animated element

An animated element

$ yarn add animate.css

Lớp

import 'animate.css';

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

Lư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

$ yarn add animate.css

các lớp học lặp đi lặp lại

Bạ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

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

Như với các lớp độ trễ và tốc độ, lớp

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

Lưu ý rằng

$ yarn add animate.css

$ yarn add animate.css

Chỉ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ĩa

Bạ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, nhấp nháy, nhịp đập, v.v.] để thu hút sự chú ý của người dùng vào một thứ 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 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ớn

Trá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ốc

Có thể tạo hoạt ảnh cho các thẻ

$ yarn add animate.css

$ yarn add animate.css

$ yarn add animate.css

Hình ảnh động vô hạn nên tránh

Mặ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ạn

Tấ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

$ yarn add animate.css

Không tắt truy vấn phương tiện

$ yarn add animate.css

34

Kể từ phiên bản 3. 7. 0 sinh động. css hỗ trợ truy vấn phương tiện

$ yarn add animate.css

Xem 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

Gotchas

Bạn không thể làm động các phần tử nội tuyến

Mặ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

Tràn ra

Hầ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

Khoảng cách giữa các lần lặp lại

Thậ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 Javascript

Bạ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

Bạn có thể phát hiện khi một hoạt ảnh kết thúc

$ yarn add animate.css

hoặc thay đổi thời lượng của nó

$ yarn add animate.css

Bạ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 ảnh và tự động xóa chúng

$ yarn add animate.css

Và sử dụng nó như thế này

$ yarn add animate.css

Nế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ống

sinh động. css v4 đã mang đến 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';

Nhưng không sợ. Mặc dù bản dựng mặc định,

$ yarn add animate.css

import 'animate.css';

$ yarn add animate.css

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';

đến

import 'animate.css';

Lư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';

đến

import 'animate.css';

Trong 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

Chỉnh sửa cái này trên GitHub

Bản dựng tùy chỉnh

Khô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';

Tiếp theo, hãy chạy

$ yarn add animate.css

• $ 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

$ yarn add animate.css

import 'animate.css';

Bây giờ, chỉ cần chạy

$ yarn add animate.css

Thay đổi tiền tố mặc định

Thậ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

import 'animate.css';

sau đó

import 'animate.css';

Dễ như ăn bánh

Chỉnh sửa cái này trên GitHub

khả năng tiếp cận

sinh động. css hỗ trợ truy vấn phương tiện

$ yarn add animate.css

Chỉnh sửa cái này trên GitHub

Đội ngũ nòng cốt

Chỉnh sửa cái này trên GitHub

Giấy phép và đóng góp

sinh động. css được cấp phép theo Giấy phép Hippocrates

Đóng góp

Yê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

Hoạt hình CSS có sử dụng JavaScript không?

Tốt hơn là tạo hoạt ảnh bằng CSS hoặc JavaScript?

Bạn có thể tạo video hoạt hình bằng JavaScript không?

CSS có tốt cho hoạt hình không?