Bạn sẽ tạo phản hồi nhẹ khi thao tác với card và nút, phân biệt transition với animation, rồi tôn trọng tùy chọn giảm chuyển động. Hiệu ứng phải hỗ trợ sử dụng chứ không che thông tin hoặc gây khó chịu.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Transition cần hai trạng thái để quan sát

Transition mô tả cách một số giá trị thay đổi giữa các trạng thái, chẳng hạn nền của nút ở bình thường và hover. Chỉ viết transition mà giá trị không đổi thì bạn sẽ không thấy một hiệu ứng tương ứng. Không phải mọi thuộc tính đều nội suy theo cùng cách.

Ghi rõ thuộc tính muốn chuyển thường dễ kiểm soát hơn transition:all. Nếu về sau thêm một thuộc tính layout, all có thể làm nó chuyển ngoài ý muốn và gây giao diện chậm hoặc bất ngờ.

Animation có các mốc theo thời gian

@keyframes định nghĩa những trạng thái và animation điều khiển thời gian, số lần lặp cùng các thông số khác. Không cần dùng animation khi một transition nhỏ đã đủ. Hiệu ứng lặp vô hạn hoặc nhấp nháy dễ gây phân tán và có thể có vấn đề tiếp cận.

Đoạn dưới chỉ để đọc cách khai báo một hiệu ứng xuất hiện một lần. Bản chạy không gắn class appear vào phần tử; nó chỉ dùng phản hồi nhẹ theo thao tác để tránh chuyển động trong lúc đọc.

@keyframes appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
.appear { animation: appear 200ms ease 1; }
@media (prefers-reduced-motion: reduce) {
  .appear { animation: none; }
}

Chọn thuộc tính và kiểm tra hiệu năng

Transform và opacity thường là các lựa chọn thuận tiện cho nhiều hiệu ứng, nhưng không có bảo đảm mọi animation của chúng đều miễn phí. Kích thước lớp, nội dung và thiết bị vẫn ảnh hưởng. Di chuyển bằng transform cũng không tự thay đổi không gian đã dành trong layout.

Không làm hover nhấc card quá cao để nó che nút hàng trên hoặc tạo chuyển động lớn trên thiết bị nhỏ. Mọi phản hồi thiết yếu vẫn cần thấy được khi không có animation.

Tôn trọng reduced motion

prefers-reduced-motion:reduce cho biết một tùy chọn của người dùng liên quan giảm chuyển động. Có thể tắt hoặc giảm những hiệu ứng không cần thiết. Đừng coi điều kiện này là lý do bỏ toàn bộ phản hồi trạng thái; đổi màu hoặc đường viền vẫn có thể thể hiện thao tác rõ ràng.

Thử chế độ giảm chuyển động trong công cụ mô phỏng hoặc cài đặt hệ thống phù hợp, rồi xác nhận CSS có khớp. Nếu chưa thể mô phỏng, đừng khẳng định đã thử; kiểm tra quy tắc và thử khi có môi trường hỗ trợ.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<article class="motion-card"><h3>Phản hồi nhỏ khi thao tác</h3><p>Hover khi có con trỏ, hoặc dùng Tab tới liên kết.</p><a href="bai-viet.html">Mở bài viết mẫu</a></article>

Thêm hoặc sửa trong styles.css

.motion-card { padding: 1rem; border: 1px solid #a8bfd1; border-radius: .6rem; transition: transform 160ms ease, box-shadow 160ms ease; }
@media (hover: hover) { .motion-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px #1739571a; } }
.motion-card:focus-within { box-shadow: 0 0 0 3px #b25b0055; }
@media (prefers-reduced-motion: reduce) { .motion-card { transition: none; } .motion-card:hover { transform: none; } }

So sánh trước và sau

Với thiết bị có hover, card nhấc nhẹ khi trỏ vào; dùng bàn phím thấy phản hồi khi focus nằm trong card. Khi tùy chọn giảm chuyển động khớp, phần dịch chuyển được bỏ.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Dùng transition:all theo thói quen: chọn thuộc tính cần chuyển.
• Chỉ hover mới nhìn thấy nút: giữ nội dung luôn có thể thao tác.
• Tắt animation nhưng vẫn để chuyển động lớn bằng transform ở trạng thái hover: xử lý cả trạng thái.

Tự kiểm tra

• Dùng Tab thay chuột để kiểm tra phản hồi.
• Đọc hoặc mô phỏng prefers-reduced-motion và xác nhận quy tắc giảm chuyển động.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML