<animate>

Ngữ cảnh sử dụng

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Giao diện DOM

Phần tử này triển khai giao diện SVGAnimateElement.

Ví dụ

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
      attributeName="rx"
      values="0;5;0"
      dur="10s"
      repeatCount="indefinite" />
  </rect>
</svg>

Mối quan tâm về khả năng truy cập

Hoạt ảnh nhấp nháy và chớp sáng có thể gây vấn đề cho những người có các mối lo nhận thức như Rối loạn Tăng động Giảm chú ý (ADHD). Ngoài ra, một số kiểu chuyển động có thể kích hoạt các rối loạn tiền đình, động kinh, và chứng đau nửa đầu cũng như độ nhạy Scotopic.

Hãy cân nhắc cung cấp một cơ chế để tạm dừng hoặc vô hiệu hóa hoạt ảnh, đồng thời sử dụng Truy vấn phương tiện Giảm chuyển động hoặc một User Agent client hint tương đương Sec-CH-Prefers-Reduced-Motion để tạo trải nghiệm bổ sung cho người dùng đã thể hiện rằng họ không muốn trải nghiệm có hoạt ảnh.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Guideline 2.2 explanations
• Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0

Đặc tả

Tương thích trình duyệt