Tạo keyframe animation CSS – Xem trước trực tiếp
Công cụ tạo keyframe animation CSS tạo khối @keyframes và animation shorthand tương ứng từ thuộc tính bạn chọn cùng thiết lập animation. Chọn translate, rotate, scale, opacity hoặc background, rồi nhập giá trị from và to, thời lượng, timing và số lần lặp. Bản xem trước trực tiếp hiển thị animation khi bạn điều chỉnh thiết lập, và bạn có thể sao chép các giá trị đã tạo.
Công cụ tạo keyframe animation CSS tạo khối @keyframes và animation shorthand từ các thiết lập bạn chọn. Chọn translate, rotate, scale, opacity hoặc background làm thuộc tính animation, nhập giá trị from và to, rồi đặt thời lượng, timing và số lần lặp. Bản xem trước trực tiếp cho bạn thấy animation thu được trong lúc làm việc.
Phép chuyển đổi dùng các thiết lập đó để viết định nghĩa keyframe và animation shorthand tương ứng. Thuộc tính đã chọn quyết định điều gì thay đổi giữa giá trị bắt đầu và kết thúc; thời lượng, timing và số lần lặp định hình cách animation chạy. Bạn có thể sao chép các giá trị đã tạo cần cho CSS.
CSS keyframes mô tả sự thay đổi giữa các trạng thái animation, còn animation shorthand gộp các thiết lập animation trong một khai báo. Tạo cả hai hữu ích khi bạn dựng nguyên mẫu chuyển động, chuẩn bị dữ liệu kiểm thử hoặc thêm animation vào stylesheet. Bản xem trước cho cách nhanh để xem kết quả trước khi sao chép mã.
Công cụ chạy hoàn toàn trong trình duyệt của bạn. Đầu vào được xử lý trên thiết bị và không gửi đến máy chủ. Công cụ hoạt động ngoại tuyến sau khi trang đã tải, vì vậy bạn có thể tiếp tục dùng mà không cần kết nối; công cụ miễn phí.
Công cụ tạo này hữu ích cho nhà phát triển ở mọi trình độ muốn tạo hoặc xem trước giá trị animation CSS. Nó cũng giúp kỹ sư DevOps và các nhóm chuẩn bị fixture hoặc dữ liệu seed có chứa mã keyframe animation.
Bước 1: Chọn thuộc tính animation: translate, rotate, scale, opacity hoặc background. Thuộc tính này quyết định loại thay đổi mà keyframes tạo ra mô tả.
Bước 2: Đặt giá trị from và to cho thuộc tính đã chọn. Các giá trị này xác định trạng thái bắt đầu và kết thúc của animation.
Bước 3: Chọn thời lượng, timing và số lần lặp. Animation shorthand tạo ra phản ánh các thiết lập này.
Bước 4: Tạo CSS và xem bản xem trước trực tiếp để thấy kết quả.
Bước 5: Sao chép khối @keyframes, animation shorthand hoặc bất kỳ giá trị đã tạo nào bạn cần.
Trường hợp sử dụng: Tạo giá trị keyframe animation dùng ngay cho kiểm thử, fixture hoặc dữ liệu seed, rồi sao chép CSS đã tạo vào dự án.
Trường hợp sử dụng: Tạo cả loạt giá trị animation cùng lúc thay vì nghĩ giá trị bằng tay.
Trường hợp sử dụng: Nhận giá trị ngẫu nhiên đúng chuẩn thay vì dựa vào phỏng đoán gõ từ bàn phím.
Trường hợp sử dụng: Xem trước animation CSS trong lúc chọn thuộc tính và giá trị from/to, giúp bạn kiểm tra kết quả trước khi sao chép mã.
Trường hợp sử dụng: Dựng khối @keyframes và animation shorthand cho nguyên mẫu UI mà không phải viết cả hai phần từ đầu.
Trường hợp sử dụng: Chuẩn bị mã animation cho stylesheet bằng cách tạo keyframes và shorthand cùng lúc.