animate

O elemento SVG <animate> fornece uma maneira de animar um atributo de um elemento ao longo do tempo.

<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>

Animation timing attributes

begin (en-US), dur (en-US), end (en-US), min (en-US), max (en-US), restart (en-US), repeatCount (en-US), repeatDur (en-US), fill

Animation value attributes

calcMode (en-US), values (en-US), keyTimes, keySplines (en-US), from (en-US), to (en-US), by (en-US)

Other Animation attributes

Most notably: attributeName (en-US), additive (en-US), accumulate (en-US)

Animation event attributes

Most notably: onbegin, onend, onrepeat

Core Attributes

Most notably: id (en-US)

Styling Attributes

class, style

Event Attributes

Global event attributes, Document element event attributes

This element implements the SVGAnimateElement (en-US) interface.

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

• 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