Trình tạo hiệu ứng hover CSS

Animation hover và transition khác nhau thế nào

Với một thay đổi đơn giản từ A sang B, transition là đủ và sẽ đảo ngược mượt mà khi con trỏ rời đi. Animation keyframes trên :hover phát huy tác dụng khi hiệu ứng có nhiều bước (nảy, rung, lắc lư) hoặc cần lặp lại khi đang rê chuột. Trình tạo này xuất cả selector :hover và :focus-visible để người dùng bàn phím nhận được phản hồi tương tự, đồng thời giữ hiệu ứng ở mức tinh tế — khoảng 150–300 ms là cảm giác phản hồi nhanh.

Bạn có thể tạo những gì

• Dòng thời gian keyframe — thêm bao nhiêu keyframe tùy ý, kéo chúng đến các phần trăm mới và đặt easing riêng cho từng cái.
• Thuộc tính — dịch chuyển X/Y, xoay, xoay 3D X/Y, scale, skew, opacity, blur, phát sáng (box-shadow), màu nền và bo góc. Giá trị còn thiếu sẽ được nội suy, nên transform không bao giờ bị giật.
• Kích hoạt — khi tải trang, khi rê chuột, khi nhấp, khi cuộn tới, hoặc animation theo cuộn chỉ dùng CSS.
• Stagger — chạy animation cho danh sách từng mục một với một custom property CSS duy nhất.
• Kiểm tra — tạm dừng, tua từng khung hình, làm chậm còn ¼ tốc độ và bật onion skin để xem mọi keyframe cùng lúc.
• Xuất — CSS shorthand hoặc longhand, HTML, JavaScript, Tailwind v3 và v4, mixin SCSS, file demo độc lập hoặc liên kết chia sẻ.

Shorthand của animation

Trợ năng

Một số người bị chóng mặt hoặc buồn nôn khi thấy chuyển động. Khi bật Tôn trọng prefers-reduced-motion, CSS sẽ tắt animation với những người truy cập đã bật “giảm chuyển động” trong hệ điều hành. Tránh nhấp nháy quá ba lần mỗi giây, và giữ các animation lặp lại ở mức nhẹ nhàng hoặc cho người dùng cách tạm dừng chúng.

Mẹo tối ưu hiệu năng

Hãy animate transform và opacity thay vì top, left, width hay margin, vì những thuộc tính này buộc trình duyệt tính lại bố cục ở mỗi khung hình. Chỉ thêm will-change cho các phần tử sắp sửa animate. Tinh chỉnh easing bằng trình tạo cubic-bezier, thêm spinner từ trình tạo CSS loader, và kết hợp animation với box shadow hoặc gradient.

Cũng được tìm dưới tên: hiệu ứng hover css, animation hover css, hiệu ứng nút hover css, hiệu ứng hover thẻ css, hover effects css.

Các công cụ dùng kèm tốt với Tạo hiệu ứng hover CSS

• Trình tạo animation CSS — Thiết kế animation CSS trên timeline keyframe thực tế.
• Trình tạo CSS Keyframes — Trình chỉnh sửa trực quan cho @keyframes.
• Trình tạo Glassmorphism — Thiết kế thẻ kính mờ với thanh trượt xem trước trực tiếp và sao chép CSS tương thích đa trình duyệt, gồm tiền tố -webkit-backdrop-filter và phương án dự phòng cho trình duyệt cũ.
• Máy tính CSS clamp() — Nhập kích thước tối thiểu, tối đa và dải chiều rộng viewport — bạn sẽ nhận được giá trị clamp() thân thiện với phóng to, kèm giải thích công thức, xem trước trực tiếp và thang chữ hoặc thang khoảng cách linh hoạt hoàn chỉnh.