CSS giảm chuyển động
Dừng hoạt ảnh CSS trang trí khi có yêu cầu giảm chuyển động.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Dự án
Kiểm tra cả hai tùy chọn và tiêu điểm bàn phím, giữ văn bản trạng thái khi chuyển động bị tắt.
Kiểm tra trước khi áp dụng
So sánh hành vi thực tế với kết quả mong đợi. Nếu kiểm tra thất bại, tìm nguyên nhân trước khi sửa tiếp.
Mô hình
Cấu hình endpoint tương thích OpenAI hoặc Anthropic bằng URL cơ sở và khóa API nếu cần. Kiểm tra kết nối. Máy chủ mô hình cục bộ phải đang chạy; công cụ từ xa có thể truyền dữ liệu riêng.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Coi tùy chọn chuyển động là một phần thay đổi giao diện
MotionHearth là không gian lập trình trên Windows để phát triển thay đổi giao diện với mô hình AI đã kết nối. Cung cấp thư mục dự án và mô tả điều tương tác cần truyền đạt. Cuộc trò chuyện có thể theo dõi thành phần cùng kiểu của nó, giúp bạn xem hoạt ảnh đề xuất trong ngữ cảnh trạng thái, tiêu điểm hay phản hồi nó cần thể hiện.
Một tác vụ gợi ý từ motion.css là xem hoạt ảnh khi có yêu cầu giảm chuyển động. Hỏi giao diện hiện có truyền đạt cùng thông tin thế nào sau khi chuyển động dừng và tiêu điểm bàn phím còn rõ không. Những câu hỏi đó biến mẫu thành thay đổi ứng dụng có thể kiểm tra. Chúng cũng giữ yêu cầu rộng hơn việc chỉ xóa một khung hình khóa nhưng vẫn đủ nhỏ để kiểm tra trên màn hình thực.
Bạn có thể chọn mô hình AI không hạn chế nếu điểm cuối tương thích OpenAI hoặc Anthropic được hỗ trợ cung cấp. Thêm chi tiết kết nối và thông tin xác thực cần thiết, lưu ý khả năng và giới hạn thuộc mô hình và máy chủ. Xem chỉnh sửa CSS và thành phần thu được trước khi kiểm thử giao diện với chuyển động bật và giảm. Dùng điều hướng bàn phím cùng đầu vào con trỏ. Mục tiêu là hành vi nhất quán ở cả hai tùy chọn, được chứng minh bằng những gì ứng dụng kết xuất thay vì chỉ mô tả của trợ lý.
Kiểm tra chuyển động cùng tương tác
Yêu cầu giảm chuyển động cần nêu gì?
Nêu phần tử chuyển động, thông tin nó truyền đạt và hành vi thay thế mong đợi. Cung cấp thành phần và biểu định kiểu liên quan. Điều này giúp thay đổi đề xuất giữ phản hồi hữu ích thay vì bỏ chuyển động mà không xét người dùng mất gì.
Hoạt ảnh dừng có thể che trạng thái hiện tại không?
Có thể nếu chuyển động là chỉ dấu duy nhất. Kiểm tra văn bản, hình dạng hay dấu trạng thái còn lại khi tắt hoạt ảnh. Yêu cầu phương án phù hợp giao diện rồi xác minh nó rõ ràng xuyên suốt tương tác.
Vì sao kiểm thử tiêu điểm bàn phím khi thay đổi chuyển động?
Kiểu gần điều khiển có hoạt ảnh có thể ảnh hưởng cả chỉ báo tiêu điểm. Điều hướng màn hình đã đổi bằng bàn phím và xác nhận phần tử đang hoạt động. Chỉ xem khung hình khóa không xác lập toàn bộ tương tác vẫn dễ hiểu.
Mô hình có thể xác minh bao nhiêu từ tệp nguồn?
Nó có thể đề xuất cách hiểu mã có sẵn trong ngữ cảnh và công cụ của nó. Bạn vẫn cần kiểm tra trạng thái đã kết xuất và chạy kiểm tra dự án. Coi màn hình, kiểu hay điều kiện môi trường chạy bị thiếu là giới hạn của việc xem xét.
MotionHearth · Cập nhật 2026-10-25