Dưới đây là danh sách các tài nguyên hoạt ảnh CSS tuyệt vời sẽ giúp bạn tạo thành phần của các hoạt ảnh một cách nhanh chóng và dễ dàng. Một số liên kết là từ bài viết trước của tôi đã được cập nhật với một số tài nguyên mới, loại bỏ một vài liên kết bị hỏng và sắp xếp các tài nguyên chỉ liên quan đến hoạt ảnh. Hy vọng nó sẽ hữu ích với bạn.

Tạo mã CSS cho hoạt ảnh

Các trang web sau đây sẽ giúp bạn tạo mã css cho các hoạt ảnh có thể được sao chép và dán thẳng trực tiếp vào các project của bạn.

1. Bounce.js

2. Animista

3. The App Guruz

4. CSS animate

5. Keyframes

6. Animatopy

Các gói hoạt ảnh npm

Các liên kết sau đây đã phân loại hoạt ảnh được tạo sẵn có thể được sử dụng trong dự án của bạn, chúng ở dạng gói, bạn có thể cài đặt chúng bằng npm hoặc bower. Một số cũng có lựa chọn liên kết qua cdn. Bạn có thể đạt được hoạt ảnh mong muốn bằng cách thay đổi các thông số khác nhau, để biết thêm chi tiết, hãy kiểm tra các trang web tương ứng.

1. Animo.JS

Animo là một công cụ nhỏ mạnh mẽ để quản lý quá trình chuyển đổi và hoạt ảnh bằng JavaScript, hãy cài đặt nó bằng cách thêm animo -core

2. Hover.CSS

Hover.css có thể được sử dụng theo một số cách; sao chép và dán hiệu ứng bạn thích từ hover.css hoặc tham chiếu biểu định kiểu. Sử dụng tên nhóm hiệu ứng cho phần tử bạn muốn áp dụng. Bạn cũng có cài đặt sử dụng npm: npm install hover.css --save . Nếu bạn định sử dụng nhiều hiệu ứng Hover.css, bạn có thể muốn tham khảo toàn bộ biểu định kiểu Hover.css:

<link href="css/hover-min.css" rel="stylesheet">

3. Animate.CSS

Animate.css là một thư viện các hình ảnh động đa trình duyệt, sẵn sàng sử dụng để sử dụng trong các dự án web của bạn. Rất hữu ích cho việc để nhấn mạnh, trang chủ, thanh trượt và gợi ý hướng dẫn sự chú ý.

Cài đặt với npm: $ npm install animate.css --save hoặc thêm nó trực tiếp đến trang web của bạn bằng cách sử dụng CDN:

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

4. Animatelo

Animatelo là cổng chuyển sang API hoạt hình web của Animate.css. Cài đặt qua NPM sử dụng: npm install animatelo --save hoặc sử dụng cdn

<!-- Include the polyfill -->
<script src="https://cdn.rawgit.com/web-animations/web-animations-js/2.2.2/web-animations.min.js"></script>

<!-- Include Animatelo -->
<script src="https://cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>

5. CSShake

Cài đặt sử dụng npm: npm i csshake hoặc

<link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">

6. Magic

Cài đặt sử dụng npm i magic.css.

7. Micron

Micron.JS là một thư viện tương tác vi mô có thể được sử dụng để thêm Tương tác vào các Phần tử DOM khác nhau. Micron.JS tạo hoạt ảnh cho một phần tử bằng cách sử dụng CSS và các hành vi tương tác được kiểm soát bởi JavaScript. Micron.JS rất dễ thích ứng và có thể làm cho các tương tác trở nên sống động bằng cách sử dụng các thuộc tính dữ liệu html5 hoặc một chuỗi các phương thức JavaScript.

Sử dụng CDN để cài đặt Micron

<link href="https://unpkg.com/webkul-micron@1.1.6/dist/css/micron.min.css" type="text/css" rel="stylesheet">
<script src="https://unpkg.com/webkul-micron@1.1.6/dist/script/micron.min.js" type="text/javascript"></script>

Bạn cũng có thể sử dụng npm: npm install webkul-micron

8. Motion UI

Motion UI là một thư viện Sass để tạo nhanh các hiệu ứng chuyển tiếp và hoạt ảnh CSS. Cài đặt Motion UI với npm npm install motion- ui –save

9. vhs

Bạn có thể cài đặt qua npm npm install vhs hoặc sử dụng cdn

<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">

10. Tachyons Animate

Cài đặt bằng npm: npm i tachyons-animate

Tạo trước các tệp css hoạt ảnh

Các trang web dưới đây cung cấp cho bạn các tệp css có chứa mã hoạt ảnh được tạo sẵn, bạn có thể thay đổi các giá trị khác nhau để có được hoạt ảnh mong muốn. Để thêm hoạt ảnh vào dự án của bạn, chỉ cần truy cập các trang web được đề cập, tải xuống tệp css và liên kết nó với các dự án của bạn.

1. Vivify

Chỉ cần đưa tệp vivify css vào phần đầu tài liệu của bạn

<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

2. All Animation CSS3

Liên kết tệp css toàn ảnh động sau khi tải xuống

<link rel="stylesheet" type="text/css" href="yourpath/all-animation.css" />

3. It's Tuesday

Tải xuống tệp ZIP hoặc sao chép kho lưu trữ. Đưa tệp CSS đã biên soạn lại vào đầu tệp HTML của bạn.

<link rel="stylesheet" type="text/css" href="css/tuesday.min.css" />

Hoặc thay vào đó, hãy sử dụng liên kết CDN nếu bạn không muốn lưu trữ tệp.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/shakrmedia/tuesday@v1.1.0/build/tuesday.min.css" />

4. Obnoxious

Để sử dụng, hãy thêm định dạng kiểu obnoxious.css vào đầu tài liệu của bạn

<link rel="stylesheet" href="/path/to/obnoxious.css">

5. Rocket

Rocket tạo ra một hoạt ảnh khi một mục được di chuyển đến một phần tử khác. Để sử dụng hoạt ảnh của Rocket, gộp nhóm rocket.css hoặc rocket.min.css và bao gồm tệp JS: rocket.js hoặc rocket.min.js vào dự án của bạn.

<link rel="stylesheet" href="rocket.min.css">
<script src="rocket.min.js"></script>

6. Wicked CSS

Muốn sử dụng thư viện wicked css thì khai báo wickedcss.min.css vào project

<link rel="stylesheet" href="css/wickedcss.min.css">

7. AniJS

Bao gồm tệp AniJS với thẻ script.

Tools

Một số công cụ hỗ trợ tạo các hoạt ảnh đẹp.

1. Ceaser

2. Wait Animate

KHOAN ĐÃ! Animate tính toán tỷ lệ phần trăm khung hình chính được cập nhật với thời gian chờ, nghĩa là bạn có thể chèn delay giữa mỗi lần lặp lại hoạt ảnh bằng cách sử dụng CSS thuần túy, không có JavaScript.

3. SVGator

Cách dễ nhất để tạo hoạt ảnh cho SVG, nâng SVG của bạn lên một cấp mới mà không cần viết một dòng mã nào, tạo các biểu tượng, biểu trưng, ​​hình nền và các hình minh họa khác.

4. Stylie

Bạn cũng có thể kiểm tra các tài nguyên sau:

  1. CSS Animation Collections
  2. Animated Spinners
  3. Click-to-copy CSS effects
  4. Animated SVG icons
  5. Vov
  6. Woah