Trình Tạo CSS Animation
Công xưởng sản xuất CSS animation (@keyframes) dành cho những người chơi hệ lười viết code.
Chọn thả ga 12 mẫu siêu xịn, vặn núm chỉnh thông số và xem nó múa ngay trên màn hình.
Cài Đặt Animation
Xuất Mã CSS
Bạn cũng có thể thích
Về Trình Tạo CSS Animation
"Trình Tạo CSS Animation" là một chiếc mỏ lết miễn phí để bạn lắp ráp các đoạn code chuyển động CSS @keyframes một cách trực quan nhất. Nó dọn sẵn mâm với 12 phong cách nền tảng, từ hiện dần (fade-in), trượt tới, phóng to cho đến nảy tưng tưng (bounce).
Điểm ăn tiền là bạn có thể thoải mái vuốt các thanh trượt để vặn vẹo thời gian (Duration), độ trễ (Delay), gia tốc (Easing), hay số lần lặp... và tận mắt thấy hiệu ứng chạy trực tiếp ở khung bên phải.
Chỉnh chán chê xong thì chỉ việc copy mã CSS sinh ra rồi ốp vào project là xong. Tool xài đồ nhà lá vườn, xử lý 100% bằng trình duyệt của bạn nên cứ yên tâm không sợ rò rỉ đi đâu cả.
Các Bước Chế Tác Hiệu Ứng
Nhặt Dáng
Khởi động bằng cách chuyển tab (Fade, Slide...) rồi tóm lấy một hiệu ứng gốc nào đó giống ý đồ của bạn nhất.
Độ Máy
Can thiệp vào tốc độ nhanh chậm, thời gian bắt đầu hay quy luật đàn hồi (easing) qua các nút bấm, mọi thứ sẽ được cập nhật nóng bên màn hình nhỏ.
Lụm Hàng
Chạm nút "Copy Code" ở phần xuất mã để nẫng đoạn CSS nóng hổi đem về đính vào file thiết kế của bạn.
Từ Điển Thuật Ngữ CSS Animation
animation-duration(Thời lượng)- Độ dài của một chu kỳ hiệu ứng, tính bằng giây (s) hoặc mili-giây (ms).
animation-timing-function(Gia tốc / Easing)- Bản chất nó là nhịp điệu. Ví dụ "linear" là chạy đều chằn chặn như xe máy đi đường trường, còn "ease-in-out" là kiểu xe tay ga - đề pa từ từ, chạy nhanh giữa chừng rồi phanh êm ái lúc dừng lại.
animation-delay(Độ trễ)- Giống như chuông báo thức, đây là lượng thời gian chờ mòn mỏi trước khi hiệu ứng thực sự xuất phát.
animation-iteration-count(Số lần lặp)- Đánh dấu số vòng mà hiệu ứng sẽ lặp lại. Cắm cờ "infinite" là nó sẽ chạy mãi cho đến khi tắt máy.
animation-direction(Hướng chạy)- Quy định chiều diễn ra của kịch bản. Chẳng hạn "reverse" bắt tua ngược như phim Ấn, còn "alternate" lại như quả lắc - lượt đi đánh xuôi, lượt về đánh ngược.
animation-fill-mode(Trạng thái cuối)- Cái này lo liệu "hậu sự" cho hiệu ứng. Chọn "forwards" là để bảo nó đứng im phăng phắc ở tư thế kết thúc thay vì hoàn hồn về trạng thái ban đầu.
transition-property(Thuộc tính đổi)- Chỉ định kẻ sẽ bị thay đổi bằng transition (ví dụ: transform, opacity hay ôm xô cả đám với all).
transition-duration- Khoảng thời gian để lột xác xong xuôi với transition.
transition-timing-function- Đường cong uốn lượn tốc độ của transition (Easing).
Hỏi Đáp Nhanh Nhẹn
- Q.Sự khác biệt giữa CSS animation và transition là gì?
transitionchỉ biết cắm đầu chạy một mạch từ A tới B mỗi khi có thứ gì đó khều nó (như di chuột vào). Trong khianimationlà một vở kịch thực thụ tự phát tự diễn, bạn muốn rẽ móp khúc nào trên đường từ A đến B qua@keyframescũng chiều được hết.- Q.Hiệu ứng nào chạy mượt và nhẹ nhất?
- Bạn cứ xài
transform(để dịch chuyển, to nhỏ, xoay mòng mòng) vàopacity(ẩn hiện) là trùm cuối về mượt mà vì nó nhờ cậy được sức của card đồ họa. Đừng dại mà đem animation đi hành hạ mấy ông nộiwidth,heighthaymargin, trình duyệt nó khóc ròng tính toán lại khung hình mệt mỏi lắm. - Q.prefers-reduced-motion là cái gì?
- Đó là câu lệnh media query dọn đường cho những người dùng có hội chứng tiền đình, say sóng vì ảnh động. Nếu bạn xài
@media (prefers-reduced-motion: reduce)để tắt bớt mấy trò múa lượn, website của bạn sẽ nhân văn hơn rất nhiều. - Q.Có bắt buộc phải dùng animation-fill-mode forwards không?
- Rất cần thiết. Đặc biệt là với trò mờ ảo fade-in, nếu bạn bơ thằng
forwards, vừa múa xong nó sẽ giật lùi nháy một phát về tàng hình (tình trạng opacity 0) ban đầu. Nó bắt buộc phải có để dán chặt khung hình cuối lên màn ảnh. - Q.Dữ liệu tôi làm ở đây có bị gửi về máy chủ không?
- Say no với gửi lén. Web xài tại chỗ trong ổ cứng trình duyệt của bạn, chẳng ai tọc mạch thu thập thói quen kéo thả animation của bạn đâu.
Muôn Mặt Cách Chơi
Màn Chào Hỏi Cực Xịn
Đẩy một quả fade-in dịu dàng, hay trượt sương sương từ dưới lên lúc mở trang, bao nâng tầm "chảnh sả" cho cái nhìn đầu tiên.
Dụ Khị Bấm Nút
Xài trò nhịp tim (pulse) hay nhún nhảy (bounce) lên mấy nút kêu gọi hành động (CTA), thể nào người dùng cũng bị ngứa mắt mà click.
Phép Thuật Khi Cuộn Chuột
Sử dụng sức mạnh của Intersection Observer cõng chung với class animation để món đồ vật tự bung lụa đúng lúc bạn cuộn tới nó.
Xoa Dịu Sự Chờ Đợi
Lắp một màn nháy mắt hay xoay vòng vòng không điểm dừng để xoa dịu đôi mắt người dùng trong lúc hì hục fetch data tải trang.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.