Trình Tạo CSS Animation

Trình Tạo CSS Animation — Xây Dựng @keyframes Với Xem Trước Trực Tiếp

Trình chỉnh sửa trực quan cho CSS @keyframes chạy hoàn toàn trong trình duyệt. Chọn preset để tải animation hoàn chỉnh, sau đó tinh chỉnh duration, easing, số lần lặp, hướng, và từng keyframe stop (translateX, translateY, scale, rotate, opacity, màu nền). Bản xem trước render lại sau mỗi thay đổi và CSS đầu ra được tạo lại dưới dạng code chuẩn, sẵn sàng copy với khối @keyframes mới và một dòng animation shorthand.

Công cụ này thực sự tạo ra cái gì?

Hai khối CSS thuần:

1. Một khối `@keyframes <tên>` với mỗi stop bạn định nghĩa (0%, 100%, cộng thêm các stop trung gian bạn thêm). Mỗi stop chỉ phát ra các thuộc tính khác giá trị mặc định — nếu bạn không bao giờ đổi màu nền, sẽ không có dòng `background-color`. Nếu `translate(x, y)` là 0 mà không có scale hay rotate, sẽ không có `transform`. Cách này giữ output gọn và dễ đọc.

2. Một animation shorthand: `animation: <tên> <duration>s <timing-function> <delay>s <iteration-count> <direction> <fill-mode>;` — đúng thứ tự trình duyệt mong đợi, nên bạn có thể dán lên bất kỳ selector nào.

Áp dụng cho phần tử bằng cách thêm shorthand vào selector của phần tử đó và đảm bảo khối `@keyframes` nằm trong phạm vi (cùng stylesheet hoặc stylesheet cha).

Làm thế nào bản xem trước trực tiếp đồng bộ với CSS đầu ra?

Mỗi thay đổi — một slider, một select, một input trong bảng keyframe — kích hoạt ba việc theo trình tự:

1. Object state cập nhật (tên, duration, keyframes, v.v.).
2. Văn bản CSS được dựng lại và hiển thị ở panel output với syntax highlight.
3. Một phần tử `<style>` có scope với hậu tố `__preview` trong tên animation được tiêm (hoặc thay thế) trong head trang, rồi class của hộp được xóa và thêm lại trong frame tiếp theo để buộc khởi động lại.

Hậu tố `__preview` ngăn xung đột tên với một bản sao CSS giống hệt đã có trên trang, và mẹo reflow (`void box.offsetWidth`) là cái làm 'Phát Lại' hoạt động kể cả khi animation đã chạy xong. Không có JavaScript điều khiển chuyển động — compositor của trình duyệt xử lý từng frame, đó là lý do bản xem trước mượt ngay trên thiết bị yếu.

Có những preset nào và nên bắt đầu từ đâu?

Mười một preset bao quát các mẫu phổ biến nhất:

- **fade-in / zoom-in / zoom-out** — animation vào/ra dùng opacity và scale.
- **slide-in-left / slide-in-right** — translate từ ngoài màn hình về vị trí, ease-out cho cảm giác giảm tốc tự nhiên.
- **bounce** — translate dọc với ba đỉnh, ease-in-out, vô hạn.
- **pulse** — scale lên 1.05 rồi về, vô hạn, hữu ích cho nút 'thu hút chú ý'.
- **shake** — dao động ngang ngắn cho trạng thái lỗi.
- **rotate-360** — một vòng quay đầy đủ, easing tuyến tính, vô hạn — cho spinner.
- **flip** — hiệu ứng lật theo rotateY mô phỏng bằng scale nhanh trên X rồi về.
- **color-cycle** — animation background-color qua các hue stop.

Nếu không chắc bắt đầu từ đâu, chọn cái gần ý định nhất rồi tinh chỉnh duration và easing. Đa số animation production là 200–400ms (cho tương tác UI), 800–1500ms (cho hero entrance), hoặc vô hạn (cho loader).

Timing function thực sự điều khiển cái gì?

Timing function là đường cong easing — nó ánh xạ thời gian animation (0 đến 1) sang giá trị tiến độ, quyết định cách hộp di chuyển giữa hai keyframe bất kỳ.

Các preset bao gồm bốn họ:

- **linear** — tốc độ không đổi. Tốt nhất cho spinner, bất cứ gì cần cảm giác cơ học.
- **ease / ease-in / ease-out / ease-in-out** — đường cong cubic bézier có sẵn. Tốt nhất cho chuyển động UI; `ease-out` phổ biến nhất vì cảm giác tự nhiên (khởi đầu nhanh, dừng nhẹ).
- **cubic-bezier(0.34, 1.56, 0.64, 1)** — vượt mức. Tọa độ y của P2 lớn hơn 1, nên animation vượt qua đích rồi ổn định. Tuyệt cho hiệu ứng vào vui mắt.
- **steps(N, end)** — nhảy N bước rời rạc. Tốt nhất cho animation sprite-sheet hoặc hiệu ứng đánh máy khi bạn không muốn nội suy mượt.

Timing function áp dụng giữa mỗi cặp keyframe trừ khi bạn ghi đè theo từng stop trong raw CSS (công cụ này dùng một đường cong cho cả animation, khớp với 95% trường hợp thực tế).

Phần trăm keyframe được dùng thế nào và tối thiểu là bao nhiêu?

Một khối `@keyframes` cần ít nhất hai stop — thường là `0%` và `100%` — để mô tả trạng thái đầu và cuối. Bạn có thể thêm các stop để định nghĩa các tư thế trung gian; trình duyệt nội suy giữa các stop liên tiếp bằng timing function.

Ví dụ, một bounce nâng hộp ở giữa dùng:

```
0% { transform: translateY(0); }
50% { transform: translateY(-40px); }
100% { transform: translateY(0); }
```

Bảng trong công cụ này sắp xếp các stop theo phần trăm, và từ chối xóa nếu chỉ còn hai (tối thiểu). Hai alias tiện lợi mà CSS cũng chấp nhận — `from` và `to` — ánh xạ tới `0%` và `100%` tương ứng, nhưng công cụ này luôn ghi dạng số để nhất quán.

Nếu muốn một thuộc tính 'nhảy' thay vì nội suy, đặt hai stop liền kề cách nhau một phần trăm (ví dụ `49% { x: 0 } 50% { x: 100 }`).

Khác nhau giữa iteration count, direction và fill mode là gì?

Ba thuộc tính này điều khiển cách animation diễn biến theo thời gian:

- **iteration-count** — phát bao nhiêu lần. `1` (mặc định) phát một lần rồi dừng ở trạng thái không animation; `infinite` lặp mãi; bất kỳ số dương nào (kể cả phân số như `2.5`) phát số lần đó.
- **direction** — `normal` phát 0%→100% mỗi lần; `reverse` phát 100%→0%; `alternate` đảo chiều mỗi vòng (0→100, rồi 100→0, rồi 0→100…); `alternate-reverse` là alternate bắt đầu ngược lại.
- **fill-mode** — hiển thị gì khi animation không chạy. `none` (mặc định) trở về trạng thái không animation khi kết thúc (và hiển thị trạng thái không animation trong thời gian `delay`). `forwards` giữ keyframe cuối được áp dụng sau khi animation kết thúc. `backwards` áp dụng keyframe đầu trong thời gian delay. `both` làm cả hai.

Mẫu phổ biến 'fade-in rồi ở lại' dùng `iteration-count: 1`, `direction: normal`, và `fill-mode: forwards` để hộp giữ hiển thị sau khi fade vào.

Làm sao dùng CSS được sinh ra trong dự án?

Ba bước:

1. Bấm **Sao Chép** để lấy cả khối `@keyframes` và shorthand `animation: …`.
2. Dán vào stylesheet của bạn. Khối `@keyframes` có thể nằm bất kỳ đâu trong CSS — trên đầu, dưới cuối, trong thẻ `<style>`, trong file `.css` link từ HTML. Giữ cả hai cùng chỗ để dễ đọc.
3. Shorthand mặc định áp dụng cho `.element` — đổi `.element` thành selector của bạn (ví dụ `.modal`, `#hero-image`, `.btn-attention`). Nếu muốn khi hover, scope shorthand vào `:hover`. Nếu muốn có điều kiện, thêm/bớt class bằng JavaScript.

Nếu cần animation ở nhiều component với duration khác nhau, định nghĩa `@keyframes` một lần và viết nhiều dòng `animation:` shorthand cùng tên nhưng khác duration.

Cho production, bạn cũng có thể dùng dạng longhand (`animation-name`, `animation-duration`, v.v.) nếu cần ghi đè chỉ một thuộc tính trong media query — nhưng shorthand gọn hơn cho khai báo ban đầu.

Công cụ này có riêng tư không? Có gửi animation của tôi đi đâu không?

Có, hoàn toàn riêng tư. Mọi thứ chạy trong trình duyệt:

- Bản xem trước là khối `<style>` tiêm vào cùng trang — không ghi canvas, không round trip tới server, không telemetry.
- CSS đầu ra được sinh bởi template string trong JavaScript; không gì được gửi tới server khi bạn đổi slider hay chọn preset.
- Nút Sao Chép dùng trực tiếp API clipboard của trình duyệt.
- Không có thư viện animation ngoài nào được tải (không GSAP, không anime.js, không Framer Motion) — đầu ra là CSS thuần mà trình duyệt đã hỗ trợ từ IE10.

Bạn có thể kiểm tra bằng DevTools → Network và quan sát panel khi tinh chỉnh animation — không có request nào nổ. Điều này cũng có nghĩa công cụ chạy offline sau khi trang đã tải, và bất kỳ `tên` nào bạn chọn cho animation cũng nằm trong trình duyệt.

Tính Năng Chính

• 11 preset animation: fade-in, slide-in-left/right, bounce, pulse, shake, rotate-360, zoom-in/out, flip, color-cycle
• Bảng keyframe chỉnh sửa được với translateX, translateY, scale, rotate, opacity, màu nền
• Xem trước render lại sau mỗi thay đổi; nút tạm dừng/phát lại
• 9 timing function bao gồm cubic-bezier (vượt mức) và steps()
• Direction (normal/reverse/alternate/alternate-reverse) và fill-mode (none/forwards/backwards/both)
• Số lần lặp: 1, 2, 3, infinite, hoặc bất kỳ số dương nào
• Thêm keyframe trung gian ở điểm giữa, tự động sắp xếp theo phần trăm
• Bắt buộc tối thiểu hai stop; nút xóa vô hiệu hóa ở mức tối thiểu
• Sinh khối @keyframes chuẩn và animation shorthand
• CSS đầu ra có syntax highlight với màu light/dark mode
• Sao chép vào clipboard chỉ một cú nhấp
• Không có thư viện animation ngoài — CSS thuần, native trình duyệt
• Hoạt động offline sau lần tải đầu
• Bố cục responsive thân thiện di động
• 100% phía client — không gửi gì tới server