Trình tạo hoạt ảnh khung hình chính CSS

Quy tắc CSS @keyframes thực sự là một dòng thời gian nhỏ: một tập hợp các điểm kiểm tra 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 thời điểm chính xác đó, với trình duyệt nội suy mọi thứ ở giữa. Xây dựng từng điểm bằng tay có nghĩa là ghi nhớ một số điểm kiểm tra phần trăm này trong đầu bạn cùng lúc trên một số thuộc tính — trình tạo này biến dòng thời gian đó thành thứ mà bạn thực sự có thể nhìn thấy và kéo: một làn ngang cho mỗi thuộc tính, với điểm đánh dấu dừng ở mỗi điểm kiểm tra.

Trung tâm là đầu phát chà. Kéo nó đến bất kỳ điểm nào trong khoảng từ 0% đến 100% và hộp xem trước sẽ chuyển sang trạng thái kết hợp chính xác ngay lúc đó — không phải khung hình chính gần nhất mà là giá trị nội suy tuyến tính thực được tính toán giữa bất kỳ hai điểm dừng nào bao quanh đầu phát trên mỗi bản nhạc đang hoạt động. Các thuộc tính số như vị trí, góc quay và nội suy tỷ lệ dưới dạng số thuần; màu nền nội suy từng kênh màu đỏ, xanh lục và xanh lam một cách độc lập, điều này làm cho rãnh màu mờ đi một cách mượt mà thông qua các màu trung gian thay vì nhảy giữa các màu bạn thực sự đặt.

Nhiều bản nhạc tự động kết hợp thành một hoạt ảnh mạch lạc: mọi thuộc tính dựa trên biến đổi (di chuyển, xoay, chia tỷ lệ) hợp nhất thành một khai báo biến đổi duy nhất ở mỗi phần trăm khung hình chính, trong khi độ mờ và màu nền vẫn nằm trên các dòng riêng của chúng, giống hệt như CSS viết tay thực sự. Tỷ lệ phần trăm trong đó một bản nhạc nhất định không có điểm dừng rõ ràng chỉ đơn giản là bị loại khỏi phần khai báo của thuộc tính đó có mục đích — phép nội suy khung hình chính của chính trình duyệt sẽ lấp đầy khoảng cách giữa bất kỳ điểm dừng nào tồn tại, giống như cách thực hiện đối với bất kỳ quy tắc @keyframes nào bạn nhập bằng tay.

Năm cài đặt trước — nảy, lắc, xung, mờ dần và trượt vào — tải dòng thời gian hoàn chỉnh, sẵn sàng để điều chỉnh (bao gồm thời lượng hợp lý, chức năng định giờ và số lần lặp lại) chỉ bằng một cú nhấp chuột. Nhấn Phát bất kỳ lúc nào để xem hoạt ảnh CSS thực chạy trên phần tử xem trước, được tạo nhanh chóng thông qua biểu định kiểu được chèn động, sau đó sao chép toàn bộ khối @keyframes cùng với tốc ký .animated-element { animation: ... } thẳng vào dự án của riêng bạn. Giống như mọi công cụ trên trang web này, tất cả đều chạy cục bộ trong trình duyệt mà chưa từng được tải lên.