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

Cách sử dụng

1. Chọn một cài đặt sẵn hoạt ảnh: chọn từ các hoạt ảnh phổ biến, mờ dần, trượt, nảy, xoay, đập, rung và nhiều hơn nữa.
2. Tùy chỉnh thời lượng và hành vi: điều chỉnh thời lượng, độ trễ, hàm easing, số lần lặp và fill mode.
3. Sao chép CSS: định nghĩa @keyframes hoàn chỉnh và thuộc tính animation rút gọn sẵn sàng để dán vào stylesheet của bạn.

Tại sao sử dụng trình tạo hoạt ảnh CSS?

Hoạt ảnh CSS làm cho giao diện sống động, thu hút sự chú ý đến các phần tử quan trọng, cung cấp phản hồi trực quan và tạo trải nghiệm người dùng mượt mà. Viết các quy tắc @keyframes bằng tay đòi hỏi phải biết cú pháp đúng, tên đường cong và các tổ hợp thuộc tính phù hợp. Trình tạo này cung cấp các cài đặt sẵn hoạt ảnh tinh tế với xem trước trực tiếp và cho phép bạn điều chỉnh từng tham số, tạo ra CSS sẵn sàng cho sản xuất mà không cần JavaScript hay thư viện hoạt ảnh.

Tính năng

• Cài đặt sẵn hoạt ảnh: mờ dần, trượt, nảy, xoay, đập, rung, lật, zoom, v.v., tất cả với xem trước trực tiếp.
• Trình chỉnh sửa keyframes tùy chỉnh: xây dựng hoạt ảnh của riêng bạn từ đầu với một giao diện trực quan.
• Kiểm soát thời gian: đặt thời lượng (ms/s), độ trễ, đường cong (linear, ease, cubic-bezier) và số lần lặp.
• Chế độ điền: kiểm soát các hành vi forwards, backwards, both và none.
• Không cần JavaScript: tất cả các hoạt ảnh được tạo đều bằng CSS thuần, không có thư viện hay framework.

Câu hỏi thường gặp

Sự khác biệt giữa animation và transition trong CSS là gì?

Các transition CSS được kích hoạt bởi các thay đổi trạng thái (di chuột, focus, chuyển đổi class) và animate giữa hai trạng thái. Các hoạt ảnh CSS sử dụng @keyframes để xác định nhiều trạng thái và chạy độc lập với tương tác người dùng, chúng có thể lặp, đảo ngược và tự động bắt đầu.

animation-fill-mode là gì và tại sao nó quan trọng?

animation-fill-mode kiểm soát xem phần tử có giữ các kiểu của hoạt ảnh trước khi nó bắt đầu (backwards), sau khi nó kết thúc (forwards), hoặc cả hai. Không có forwards, phần tử trở về kiểu gốc đột ngột vào cuối hoạt ảnh.

Hoạt ảnh CSS có hiệu suất tốt không?

Các hoạt ảnh chỉ sử dụng transform và opacity được tăng tốc bởi GPU và rất mượt. Tránh animate các thuộc tính bố cục như width, height, margin hoặc top/left, chúng kích hoạt tính toán lại layout và có thể gây giật. Hãy giữ ở transform và opacity cho 60 fps.

Animation CSS thực sự làm gì

Animation CSS nội suy một hoặc nhiều thuộc tính CSS giữa các khung hình chính được xác định theo thời gian, tạo ra chuyển động hoặc thay đổi có thể nhìn thấy mà không cần JavaScript. Mô hình có hai phần: quy tắc @keyframes xác định animation trông như thế nào ở các bước dựa trên phần trăm (0% đến 100%), và thuộc tính shorthand animation (hoặc các anh em longhand của nó animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-fill-mode) cho trình duyệt biết cách phát định nghĩa keyframes đó. Trình duyệt xử lý tất cả nội suy, easing, và thời gian khung hình trong C++, thường được tăng tốc GPU cho các thay đổi transform và opacity.

Animation khác với transition CSS theo hai cách. Transition kích hoạt khi trạng thái của một phần tử thay đổi (một hover, một class toggle, một sự kiện focus) và nội suy giữa chính xác hai giá trị: cũ và mới. Animation chạy độc lập với trạng thái, theo sau một số lượng bước keyframe tùy ý, có thể lặp vô thời hạn, có thể chạy ngược, và có thể được kích hoạt, tạm dừng và tiếp tục thông qua CSS hoặc JavaScript. Transition là công cụ phù hợp cho "snap từ A đến B trong nửa giây"; animation là công cụ phù hợp cho "lặp lại pulse thu hút sự chú ý này mãi mãi" hoặc "phát chuỗi entry này một lần khi phần tử xuất hiện."

Đối với thiết kế web hiện đại, animation CSS thay thế một lượng lớn những gì từng yêu cầu thư viện JavaScript. Spinner, fade-in, slide-up, pulse chú ý, dấu kiểm thành công: tất cả hiện là các mẫu CSS tiêu chuẩn. Sự đánh đổi là khả năng biểu đạt cho các chuỗi phức tạp. Animation CSS có thể làm nhiều việc nhưng ngừng thuận tiện xung quanh 5 đến 7 bước keyframe với các thay đổi thuộc tính đồng bộ; cho các animation được lên storyboard, chuỗi liên kết scroll, hoặc bất cứ điều gì động phụ thuộc vào trạng thái JavaScript, các thư viện chuyên dụng (GSAP, Framer Motion, Web Animations API) vẫn là lựa chọn tốt hơn.

Cách công cụ này hoạt động dưới mui xe

Khi bạn chọn một preset (ví dụ "bounce" hoặc "fade-in") công cụ tải một chuỗi @keyframes được xác định trước vào khu vực xem trước và áp dụng thuộc tính animation cho hộp xem trước. Các keyframe là CSS thực, không phải định dạng tùy chỉnh: những gì bạn thấy là những gì bạn nhận được để sao chép. Các slider cập nhật các giá trị thời gian animation (duration, delay, iteration count) bằng cách chỉnh sửa thuộc tính animation inline trong thời gian thực, vì vậy xem trước phản ánh mọi thay đổi ngay lập tức mà không tải lại trang.

Việc lựa chọn hàm easing sử dụng các giá trị timing-function CSS tiêu chuẩn: linear (tốc độ không đổi), ease (mặc định, bắt đầu và kết thúc chậm), ease-in (bắt đầu chậm), ease-out (kết thúc chậm), ease-in-out (bắt đầu và kết thúc chậm), hoặc cubic-bezier(x1, y1, x2, y2) cho các đường cong tùy chỉnh. Đường cong animation có thể nhìn thấy được tính toán bởi triển khai timing-function gốc của trình duyệt; xem trước là đầu ra được trình duyệt render thực tế, không phải mô phỏng JavaScript.

Hộp mã hiển thị CSS đầy đủ bạn cần để đưa vào một stylesheet: cả khối @keyframes và khai báo .your-class { animation: ... }. Nhấp "Copy CSS" và cả hai được ghi vào clipboard của bạn dưới dạng một khối văn bản duy nhất. Không có tệp nào được tạo, không có máy chủ nào xử lý bất cứ điều gì, và công cụ không có backend để gọi. Xem trước, tạo mã, và ghi clipboard đều xảy ra trong JavaScript trên thiết bị của bạn. Làm mới trang và cấu hình tùy chỉnh của bạn sẽ biến mất trừ khi bạn sao chép nó trước.

Lịch sử ngắn của animation web

• Flash thống trị chuyển động web, 1996 đến 2010.Adobe Flash (ban đầu là Macromedia) là công cụ chính cho animation web trong suốt đầu những năm 2000. Dựa trên vector, được điều khiển bởi timeline, với runtime plugin tùy chỉnh. Đến năm 2010, Flash điều khiển hầu hết các quảng cáo banner, trình phát video YouTube, và các trò chơi thời Newgrounds. Sau đó các thiết bị di động giết nó: iPhone chưa bao giờ hỗ trợ Flash, Android bỏ hỗ trợ vào năm 2012, các trình duyệt phản đối plugin vào năm 2020.
• CSS Transition trong WebKit, 2007.Engine WebKit của Apple vận chuyển -webkit-transition vào năm 2007, nguyên thủy animation CSS được triển khai phổ biến đầu tiên. Được sử dụng nhiều trong các ứng dụng web iPhone đầu tiên. Đến năm 2009, thuộc tính nằm trong quá trình đặc tả CSS và được vận chuyển không có prefix trên các trình duyệt vào năm 2014.
• CSS Animations Module Level 1, 2009.WebKit thêm -webkit-animation và @-webkit-keyframes vào tháng 3 năm 2009 trước bản nháp W3C CSS Animations Module Level 1 (cũng năm 2009). Firefox theo sau trong phiên bản 5 (2011), IE trong phiên bản 10 (2012). Kỷ nguyên "không cần JavaScript cho animation cơ bản" bắt đầu.
• GSAP và các thư viện animation JS, từ năm 2008 trở đi.Phương thức .animate() của jQuery (2006) khởi đầu kỷ nguyên thư viện animation JS; GreenSock Animation Platform (GSAP, ra mắt 2008) trở thành tiêu chuẩn vàng cho animation chuỗi phức tạp, scrub timeline, và hiệu suất. Được sử dụng trong các trang web tiếp thị tầm Disney, Coca-Cola, và Awwwards. Tiếp tục cùng tồn tại với animation CSS: GSAP cho độ phức tạp chuỗi, CSS cho sự đơn giản khai báo.
• Web Animations API được chuẩn hóa, 2014 đến 2018.Đặc tả W3C Web Animations cung cấp một API JavaScript phơi bày animation CSS và thêm kiểm soát lập trình: element.animate(keyframes, options). Chrome vận chuyển trong phiên bản 36 (2014), Firefox trong phiên bản 75 (2020), Safari trong phiên bản 13.1 (2020). Cầu nối khoảng cách giữa CSS khai báo và JavaScript với sức mạnh thư viện đầy đủ.
• Animation được điều khiển bởi scroll xuất hiện, 2023 đến 2024.Module CSS Scroll-driven Animations giới thiệu animation-timeline, cho phép các animation CSS gắn với vị trí scroll thay vì (hoặc bên cạnh) thời gian. Chrome 115 (tháng 7 năm 2023) vận chuyển đầu tiên; Safari và Firefox thêm hỗ trợ qua các năm 2024 và 2025. Mở khóa hiệu ứng parallax, chỉ báo tiến trình scroll, và animation tiết lộ section trong CSS thuần.

Quy trình làm việc thực tế

• Spinner tải và trạng thái skeleton.Một loader xoay (animation: spin 1s linear infinite với keyframe xoay 360 độ) là cách sử dụng animation CSS phổ biến nhất. Các skeleton screen với hiệu ứng shimmer trượt sử dụng animation translateX hoặc background-position. Cả hai đều cần thiết cho hiệu suất được nhận thức: trong khi nội dung tải, animation nói với người dùng "chúng tôi đang làm việc" thay vì "nó bị hỏng."
• Tương tác vi mô hover và focus.Các nút pulse nhẹ khi hover, các thẻ nâng lên khi focus, các biểu tượng lắc lư khi nhấp: những tương tác vi mô này thêm tính cách mà không xâm phạm. Sử dụng animation với animation-iteration-count: 1 và animation-fill-mode: forwards cho hành vi "phát một lần và ở lại", hoặc transition cho các mẫu "snap đến trạng thái hover".
• CTA thu hút sự chú ý.Một nút call-to-action chính với pulse chậm liên tục hoặc animation breathing-glow thu hút mắt mà không hung hăng. Kết hợp transform: scale(1) to scale(1.05) với animation-iteration-count: infinite và thời lượng 3 đến 4 giây cho nhịp thở yên tĩnh. Tránh các pulse nhanh hơn; chúng cảm thấy điên cuồng và làm phiền người dùng nhanh chóng.
• Vào trang và tiết lộ section.Animation fade-in và slide-up khi tải trang hoặc scroll-into-view tạo ra các lượt đến được đánh bóng. CSS xử lý trường hợp đơn giản (animation chạy một lần khi tải); cho các entry được kích hoạt bởi scroll, IntersectionObserver trong JavaScript thêm một lớp kích hoạt animation khi phần tử vào viewport. Animation được điều khiển bởi scroll hiện đại đang bắt đầu thay thế mẫu này trong CSS thuần.
• Phản hồi thành công và rung lỗi.Phản hồi gửi biểu mẫu sử dụng các tín hiệu animation: lưu thành công hiển thị dấu kiểm xanh với animation bounce-in ngắn, trong khi lỗi làm rung biểu mẫu ngắn (keyframe translateX luân phiên -10px và +10px trong 0,4 giây). Những cú chạm nhỏ này làm cho các tương tác cảm thấy phản hồi và có chủ ý.
• Hero tiếp thị và chuỗi storytelling.Landing pages và các section hero thường sử dụng các animation vào theo từng giai đoạn (logo fade in, headline trượt lên, nút CTA pulse) để tập trung sự chú ý qua một chuỗi được thiết kế. Delay animation (animation-delay: 0s, 0.3s, 0.6s) trên ba phần tử anh em tạo ra hiệu ứng so le mà không cần dàn xếp JavaScript.

Các cạm bẫy phổ biến và ý nghĩa của chúng

• Animation các thuộc tính layout giết hiệu suất.Các thuộc tính như width, height, margin, padding, top, left, right, bottom, và font-size kích hoạt tính toán lại layout trên mỗi khung hình animation, thường gây ra jank hoặc hiệu suất dưới 60fps. Sử dụng transform: translateX() thay vì left, transform: scale() thay vì width/height, và opacity thay vì visibility. Transform và opacity được kết hợp GPU và không kích hoạt layout.
• Bỏ qua prefers-reduced-motion làm hại khả năng tiếp cận.Một số người dùng trải nghiệm say tàu xe hoặc rối loạn tiền đình bị kích hoạt bởi animation web. Truy vấn media prefers-reduced-motion: reduce cho phép người dùng từ chối ở cấp OS. Bọc các animation trang trí của bạn trong @media (prefers-reduced-motion: no-preference) { ... } hoặc đặt animation-duration: 0.01ms cho người dùng yêu cầu chuyển động giảm. Các animation cần thiết (spinner tải) có thể ở lại, nhưng các animation trang trí nên tôn trọng tùy chọn.
• Lạm dụng will-change làm hại bộ nhớ.Thuộc tính will-change gợi ý cho trình duyệt thăng cấp GPU một phần tử trước thời gian, có thể làm mượt animation. Nhưng thêm will-change vào nhiều phần tử tiêu thụ bộ nhớ GPU đáng kể. Chỉ áp dụng nó cho các phần tử bạn thực sự animate, lý tưởng được thêm qua JavaScript ngay trước khi animation bắt đầu và xóa sau đó. Đặt will-change: transform trên mọi phần tử trên trang là một antipattern.
• Sự nhầm lẫn animation-fill-mode.Theo mặc định, một phần tử trở về kiểu ban đầu sau khi animation kết thúc. Để giữ trạng thái cuối cùng của animation, sử dụng animation-fill-mode: forwards. Để bắt đầu phần tử ở trạng thái đầu tiên của animation trước khi delay trôi qua, sử dụng backwards. Để làm cả hai, sử dụng both. Nhiều lỗi "tại sao phần tử của tôi snap trở lại?" đến từ việc thiếu thuộc tính này. Giá trị mặc định là none, hiếm khi là những gì bạn muốn cho các animation entry một lần.
• Animation vô hạn làm cạn pin di động.Một animation animation-iteration-count: infinite chạy mãi mãi, giữ GPU hoạt động và tỷ lệ làm mới màn hình ở mức tối đa. Trên các thiết bị di động, điều này làm cạn pin một cách đáng chú ý. Đối với các animation trang trí liên tục (một logo thở nhẹ nhàng), hãy xem xét tạm dừng animation khi trang bị ẩn (document.visibilityState !== 'visible'), hoặc giới hạn số lần lặp lại đến một số hữu hạn như 3 đến 5 thay vì vô hạn.
• Xung đột đặt tên keyframe ở quy mô lớn.Tên quy tắc @keyframes là toàn cục trong một stylesheet: @keyframes fade trong một tệp xung đột với @keyframes fade trong một tệp khác. Đối với các codebase lớn, namespace tên keyframe của bạn (@keyframes app-fade-in, @keyframes hero-slide-up) để tránh ghi đè im lặng. CSS modules và các thư viện CSS-in-JS xử lý điều này tự động với scope-hashing.

Quyền riêng tư: mọi thứ chạy trong trình duyệt của bạn

Các công cụ trình tạo CSS có hai loại: trang HTML đơn giản chạy JavaScript phía máy khách (riêng tư, nhanh) và trình chỉnh sửa đám mây lưu các dự án của bạn (cộng tác nhưng có sự đánh đổi về quyền riêng tư). Công cụ này là loại đầu tiên. Các giá trị slider, preset đã chọn, CSS được tạo: tất cả đều ở trong phiên trình duyệt của bạn. Làm mới trang và trạng thái biến mất trừ khi bạn sao chép CSS trước. Không có máy chủ nào lưu các lựa chọn animation của bạn, không có phân tích nào theo dõi các preset bạn đã thử nghiệm, và không cần tài khoản.

Thuộc tính quyền riêng tư quan trọng chủ yếu đối với công việc thiết kế độc quyền. Một studio prototyping animation cho dự án khách hàng bí mật, một nhà phát triển đang làm việc trên các tương tác vi mô của ứng dụng chưa công bố, hoặc một nhà thiết kế đang lặp lại trên chiến dịch thương hiệu: bất kỳ bối cảnh nào mà lịch sử lặp lại hoặc thiết kế đang tiến hành có thể tiết lộ thông tin về công việc. Với công cụ này, không có gì được ghi lại vì không có gì được gửi đi. Mở tab Network của trình duyệt và bạn sẽ thấy không có yêu cầu đi ra trong quá trình sử dụng; chỉ có lượt tải trang ban đầu lấy HTML và JavaScript.

Khi công cụ khác là lựa chọn phù hợp

• GSAP cho các animation chuỗi phức tạp.GreenSock Animation Platform (GSAP) xử lý các animation đồng bộ, được sắp xếp, có thể scrub tốt hơn nhiều so với CSS thuần. Đối với các animation tiếp thị được lên storyboard, chuỗi liên kết scroll với khả năng đảo ngược, hoặc bất cứ điều gì phụ thuộc vào các thay đổi trạng thái JavaScript, GSAP là tiêu chuẩn ngành. Miễn phí cho hầu hết các trường hợp sử dụng (với giấy phép club cho một số plugin).
• Lottie cho các animation do nhà thiết kế tạo.Lottie (ban đầu từ Airbnb) render các animation After Effects dưới dạng JSON, cho phép các nhà thiết kế tạo ra chuyển động phức tạp trong After Effects và xuất trực tiếp ra web/iOS/Android. Đối với các animation vượt quá những gì các keyframe được mã hóa bằng tay có thể tạo ra thực tế (animation nhân vật, morph phức tạp, các chuỗi minh họa), pipeline thiết kế-thành-mã của Lottie thắng so với animation CSS thủ công.
• Web Animations API cho kiểm soát JavaScript.Nếu bạn cần bắt đầu, tạm dừng, đảo ngược, hoặc sửa đổi các animation từ JavaScript khi chạy, Web Animations API (element.animate(keyframes, options)) là ergonomic hơn việc quản lý các lớp CSS. Trả về một đối tượng Animation với các phương thức như .pause(), .play(), .reverse(), và một Promise .finished. Hỗ trợ trình duyệt bản địa, không cần thư viện.
• requestAnimationFrame cho game loop.Đối với các animation được điều khiển bởi logic JavaScript liên tục (game loop, mô phỏng vật lý, hình ảnh hóa dữ liệu thời gian thực), requestAnimationFrame với cập nhật thuộc tính thủ công theo từng khung hình là cách tiếp cận đúng. Animation CSS có tính khai báo và được xác định trước; rAF cung cấp cho bạn kiểm soát từng khung hình về những gì cần cập nhật. Sử dụng Canvas hoặc WebGL khi bạn cũng cần kiểm soát cấp pixel.

Các câu hỏi thường gặp khác

Làm thế nào để làm cho một animation chỉ phát một lần?

Đặt animation-iteration-count: 1 (là mặc định nếu không được chỉ định). Để làm cho phần tử ở lại trạng thái cuối cùng của animation sau khi nó hoàn thành (thay vì snap trở lại kiểu ban đầu), cũng đặt animation-fill-mode: forwards. Shorthand kết hợp là animation: fadeIn 0.5s ease-out forwards;.

Tôi có thể tạm dừng và tiếp tục một animation không?

Có, với animation-play-state: paused (hoặc running). Bật/tắt thuộc tính này qua JavaScript (ví dụ, khi nhấp nút) hoặc trong CSS qua :hover cho các mẫu "tạm dừng khi hover". Animation đóng băng tại điểm hiện tại của nó và tiếp tục từ đó khi được đặt trở lại running, không mất tiến trình. Điều này hoạt động tương tự trong transition nhưng chỉ thuộc tính animation-play-state tồn tại cho kiểm soát tạm dừng runtime.

Làm thế nào để kích hoạt một animation khi nhấp hoặc scroll?

Đối với trình kích hoạt nhấp, bật/tắt một lớp CSS qua JavaScript: element.classList.toggle('animate-in'). Animation chạy khi lớp được thêm vào. Đối với trình kích hoạt scroll, sử dụng IntersectionObserver để phát hiện khi phần tử vào viewport và thêm lớp khi đó. Đối với các trình duyệt hiện đại, CSS Scroll-driven Animations cho phép bạn liên kết tiến trình animation trực tiếp với vị trí scroll mà không cần JavaScript thông qua animation-timeline: scroll().

Tại sao animation của tôi nhấp nháy hoặc giật cục?

Hầu hết các vấn đề nhấp nháy/giật cục đến từ việc animate các thuộc tính kích hoạt layout (width, height, top/left) thay vì các tương đương dựa trên transform. Chuyển left: 0 thành transform: translateX(0) và animation sẽ mượt mà hơn. Các nguyên nhân khác: overdraw từ nhiều lớp bán trong suốt, layout thrashing từ JavaScript đọc và ghi styles trong cùng một khung hình, hoặc các bóng và bộ lọc quá mức trên phần tử được animate.

Tôi có nên sử dụng animation trên các giao diện quan trọng đối với khả năng tiếp cận không?

Sử dụng chúng, nhưng tôn trọng prefers-reduced-motion. Hướng dẫn WCAG 2.1 khuyến nghị cung cấp tùy chọn để tắt chuyển động không cần thiết. Bọc các animation trang trí trong @media (prefers-reduced-motion: no-preference) để người dùng đặt tùy chọn OS có được trải nghiệm tĩnh. Animation phản hồi cần thiết (chỉ báo tải, rung lỗi) có thể được giữ; các animation thuần túy trang trí nên là opt-in cho người dùng nhạy cảm.

Tôi có thể sử dụng cubic-bezier cho các đường cong easing tùy chỉnh không?

Có. Hàm timing cubic-bezier(x1, y1, x2, y2) cho phép bạn xác định bất kỳ đường cong easing nào với hai điểm kiểm soát. Mỗi giá trị x nằm giữa 0 và 1 (đại diện cho thời gian), giá trị y có thể âm hoặc lớn hơn 1 (cho phép các hiệu ứng overshoot và bounce). Sử dụng công cụ Cubic Bezier của chúng tôi hoặc cubic-bezier.com cổ điển của Lea Verou để chọn đường cong một cách trực quan. Các lựa chọn thay thế preset phổ biến: ease, ease-in, ease-out, ease-in-out, và các biến CSS linear-aliased cubic-bezier(0.25, 0.1, 0.25, 1) (ease mặc định).