Trình tạo hoạt ảnh CSS
Điều chỉnh cài đặt sẵn chuyển động hoặc khung hình chính rồi phát hoạt ảnh để kiểm tra. Lấy CSS để dùng trên trang web cùng một ví dụ sử dụng HTML.
Bạn có thể làm gì
Điều chỉnh chuyển động từ một bộ thiết lập
Chọn trong 12 loại, gồm hiệu ứng vào, hiệu ứng ra và xoay. Thay đổi thời lượng và số lần lặp cho phù hợp với nhu cầu.
Sửa cả các trạng thái trung gian
Chỉ định chuyển động, góc xoay, tỷ lệ và độ đục cho từng khung hình chính rồi kiểm tra chuyển động được tạo.
Lấy CSS và HTML
Sao chép hoặc lưu CSS của hoạt ảnh cùng một ví dụ sử dụng HTML có cùng lớp đó.
Cách sử dụng
Chọn một bộ thiết lập
Chọn chuyển động bạn muốn và đặt thời lượng cho 1 lần phát. Chọn một bộ thiết lập khác cũng sẽ thay thế mọi cài đặt bạn đã điều chỉnh.
Chỉ điều chỉnh những phần bạn cần
Mở chi tiết phát hoặc khung hình chính để đổi chuyển động trung gian, hướng, số lần lặp và các cài đặt khác.
Tạo và phát
Kiểm tra bằng “Tạo CSS và xem trước”. Nếu bạn đổi bất kỳ cài đặt nào, hãy tạo lại.
Lấy CSS và HTML
Áp dụng CSS và thêm lớp toollet-motion vào một phần tử HTML. Dùng ví dụ sử dụng HTML cùng với CSS.
Hữu ích khi
Tạo hoạt ảnh xuất hiện
Dùng một bộ thiết lập hiệu ứng mờ dần hoặc hiệu ứng vào từ dưới lên để điều chỉnh chuyển động và tốc độ xuất hiện.
Chuyển động khi tương tác với một nút
Đổi điều kiện bắt đầu thành hover hoặc tiêu điểm bàn phím để tạo chuyển động đáp ứng với tương tác.
Hiểu khung hình chính và điều kiện phát
Trạng thái trung gian và thời lượng
% của một khung hình chính là vị trí của nó trong 1 lần phát. Với hoạt ảnh 1 giây, 50% là ở 0.5 giây. Đường cong chuyển động quyết định cách các giá trị thay đổi giữa các khung hình chính.
Chuyển động, góc xoay và ngoại hình
Vị trí ngang/dọc là lượng dịch chuyển từ vị trí ban đầu. Tỷ lệ 1 là kích thước gốc; độ đục 0 là trong suốt và 1 là đục.
Độ trễ, số lần lặp và hướng
Độ trễ chỉ được cộng một lần trước khi bắt đầu phát. Với thời lượng hữu hạn, tổng thời gian là độ trễ + thời lượng 1 lần phát × số lần lặp. Chế độ luân phiên chuyển qua lại giữa hướng tiến và hướng lùi.
Trạng thái trước và sau khi phát
Chọn trạng thái nào xuất hiện trong lúc độ trễ và sau khi phát xong. Cài đặt đảo chiều và luân phiên thay đổi vị trí khung hình chính được dùng ở đầu và cuối.
Cài đặt giảm chuyển động
CSS được tạo hỗ trợ cài đặt giảm chuyển động của thiết bị. Nó dừng hoạt ảnh và dùng trạng thái ở đầu cuối được xác định bởi hướng và số lần lặp đã cấu hình. Với phát vô hạn, nó dùng đầu cuối của lần phát đầu tiên.
Câu hỏi thường gặp
Tôi có thể chỉ phát một lần không?
Tắt “Tiếp tục lặp” và đặt số lần lặp là 1. Các bộ thiết lập tiêu chuẩn bắt đầu với 1 lần phát, còn hiệu ứng xoay và trôi bắt đầu với lặp liên tục được bật.
Tôi nên áp dụng CSS vào phần tử nào?
Thêm lớp toollet-motion vào một phần tử HTML rồi dùng cùng với CSS đã tạo. Ví dụ sử dụng HTML là một đoạn phần tử button, không phải một trang web độc lập hoàn chỉnh.
Tôi có thể tạo bao nhiêu khung hình chính?
Bạn có thể có 2–8 khung hình chính, gồm điểm bắt đầu ở 0% và điểm kết thúc ở 100%. Thêm một khung hình chính sẽ đặt nó vào giữa khoảng rộng nhất. Điểm bắt đầu và điểm kết thúc không thể xóa, và chỉ vị trí % của chúng là cố định.
Bản xem trước biến mất sau khi tôi đổi một cài đặt.
Kết quả bị xóa khi cài đặt thay đổi để bạn không vô tình dùng chuyển động hoặc mã từ cài đặt trước. Hãy tạo lại để kiểm tra cài đặt hiện tại.
Vì sao bản xem trước không chuyển động?
Chuyển động dừng khi thiết bị của bạn bật giảm chuyển động. Với cài đặt hover và focus, hãy kiểm tra cả điều kiện bắt đầu. Bản xem trước tạm dừng khi bạn chuyển sang tab khác.
Tôi có thể dùng nhiều hoạt ảnh trên cùng một trang không?
Tên lớp và tên khung hình chính được tạo là dùng chung. Để dùng các hoạt ảnh riêng biệt, hãy đổi cả hai tên cho từng hoạt ảnh và phản ánh các thay đổi đó trong HTML tương ứng.
Đầu vào và kết quả
- Cài đặt
- 12 bộ thiết lập, 2–8 khung hình chính, và thời lượng 0.2–60 giây.
- Phát
- Độ trễ 0–60 giây, 1–100 lần lặp hoặc lặp vô hạn, đường cong chuyển động, hướng, trạng thái trước và sau khi phát, cùng điều kiện bắt đầu.
- Kết quả
- CSS và một ví dụ sử dụng HTML. Chỉ chuyển động được định nghĩa; không tạo ra trang web hoàn chỉnh hay tệp video.