<animate>

The SVG <animate> element provides a way to animate an attribute of an element over time.

Example

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

Attributes

Animation Attributes

Animation timing attributes

begin, dur, end, min, max, restart, repeatCount, repeatDur, fill

Animation value attributes

calcMode, values, keyTimes, keySplines, from, to, by

Other Animation attributes

Most notably: attributeName, additive, accumulate

Animation event attributes

Most notably: onbegin, onend, onrepeat

Global attributes

Core Attributes

Most notably: id

Styling Attributes

class, style

Event Attributes

Global event attributes, Document element event attributes

Usage notes

This element implements the SVGAnimateElement interface.

Accessibility concerns

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

Specifications

Browser compatibility