⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

Trình tạo hoạt ảnh CSS Keyframe

Xây dựng hoạt ảnh @keyframes thực tế trên dòng thời gian đa track – các điểm dừng transform, opacity và background-color cho mỗi track – với thanh trượt thời gian hiển thị chính xác trạng thái động ở giữa các keyframe.

🔒 Được xử lý hoàn toàn trong trình duyệt của bạn — không có nội dung nào bạn nhập ở đây được tải lên.

Nhấp vào bất kỳ vị trí nào trên làn để thêm điểm dừng. Kéo điểm dừng để di chuyển, hoặc chỉnh sửa giá trị % và giá trị thuộc tính ở bên dưới làn. Nhấp đúp vào điểm dừng để xóa (tối thiểu 2 điểm mỗi track).

Đang xử lý... 0%

Kết quả

Một rule CSS @keyframes thực chất là một dòng thời gian nhỏ: một tập hợp các điểm phần trăm, mỗi điểm khai báo một thuộc tính sẽ trông như thế nào tại chính xác thời điểm đó, trình duyệt sẽ nội suy mọi thứ ở giữa. Việc tự xây dựng một rule đồng nghĩa với việc phải ghi nhớ cùng lúc nhiều điểm phần trăm cho nhiều thuộc tính – trình tạo này biến dòng thời gian đó thành thứ bạn có thể thực sự nhìn thấy và kéo thả: mỗi thuộc tính là một làn ngang, với một điểm đánh dấu tại mỗi điểm dừng.

Trọng tâm là thanh trượt thời gian. Kéo nó đến bất kỳ điểm nào giữa 0% và 100%, hộp xem trước sẽ chuyển đến chính xác trạng thái kết hợp tại thời điểm đó – không phải keyframe gần nhất, mà là giá trị nội suy tuyến tính thực được tính toán giữa hai điểm dừng bao quanh thanh trượt trên mọi track đang hoạt động. Các thuộc tính số như vị trí, góc quay và tỉ lệ được nội suy dưới dạng số thông thường; background-color nội suy riêng từng kênh đỏ, xanh lá và xanh dương, đó là lý do track màu sắc chuyển tiếp mượt mà qua các sắc độ trung gian thay vì nhảy giữa các màu bạn đã đặt.

Nhiều track kết hợp tự động thành một hoạt ảnh duy nhất: mọi thuộc tính transform (di chuyển, xoay, tỉ lệ) hợp nhất vào một khai báo transform duy nhất tại mỗi phần trăm keyframe, trong khi opacity và background-color nằm trên các dòng riêng, giống hệt CSS viết tay thực tế. Các phần trăm mà tại đó một track không có điểm dừng rõ ràng sẽ bị bỏ qua khỏi khai báo của thuộc tính đó – chính khả năng nội suy keyframe của trình duyệt sẽ lấp đầy khoảng trống giữa các điểm dừng có sẵn, giống như với bất kỳ rule @keyframes nào bạn tự viết.

Năm mẫu – nảy, rung, đập, mờ dần và trượt vào – tải lên một dòng thời gian hoàn chỉnh, sẵn sàng tinh chỉnh (bao gồm duration, timing function và số lần lặp hợp lý) chỉ với một cú nhấp. Nhấn Play bất cứ lúc nào để xem hoạt ảnh CSS thực sự chạy trên phần tử xem trước, được tạo động thông qua stylesheet chèn vào, sau đó sao chép toàn bộ khối @keyframes cùng shorthand .animated-element { animation: ... } vào dự án của bạn. Giống như mọi công cụ trên trang này, mọi thứ chạy cục bộ trong trình duyệt, không có gì được tải lên.

Thích công cụ này? Nghĩ sản phẩm này hữu ích? Thấy tiềm năng và muốn ủng hộ?

🛡️
Thực thi trong Trình duyệt

File và dữ liệu đầu vào của bạn không bao giờ rời khỏi thiết bị này. Xử lý hoàn toàn ngoại tuyến. Bảo mật 100%.

Định dạng & Quy tắc chấp nhận

  • Dòng thời gian đa track cho transform (translateX, translateY, rotate, scale), opacity và background-color, mỗi track có các điểm dừng riêng có thể kéo thả.
  • Nội suy tuyến tính thực – thuộc tính số và kênh RGB cho màu sắc – điều khiển bản xem trước khi kéo giữa hai điểm dừng bất kỳ trên track.
  • Nút Play áp dụng CSS @keyframes thực tế đã tạo vào bản xem trước thông qua stylesheet được chèn động, kèm theo đầu ra đầy đủ @keyframes + animation shorthand có thể sao chép.

Lợi ích chính

✓ Thanh trượt thời gian hiển thị chính xác trạng thái động ở giữa các keyframe – không phải là bước nhảy giữa các điểm dừng – giống như cách trình duyệt thực sự hiển thị.
✓ Mỗi thuộc tính nằm trên một track riêng với các điểm dừng riêng, vì vậy hiệu ứng nảy, đổi màu và mờ dần có thể chạy đồng thời trên cùng một phần tử mà không xung đột.
✓ Năm mẫu có sẵn (nảy, rung, đập, mờ dần, trượt vào) cung cấp điểm khởi đầu chỉ với một cú nhấp, sau đó mọi điểm dừng vẫn có thể chỉnh sửa hoàn toàn.

Trường hợp sử dụng

  • • Kéo thanh scrub đến bất kỳ điểm nào trong animation bật nảy hoặc rung để xem chính xác trạng thái trung gian nội suy trực tiếp trước khi xuất CSS.
  • • Xếp chồng track translateX và track opacity để tạo animation xuất hiện trượt vào và mờ dần, sau đó sao chép toàn bộ @keyframes cùng shorthand animation.
  • • Thêm track background-color bên cạnh track scale để tạo hiệu ứng animation thay đổi màu và kích thước nút cùng lúc, quan sát các kênh RGB hòa trộn trực tiếp khi bạn kéo thanh scrub.