<animate>

The animate SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element or referenced by the href attribute of the target element.

Usage context

Attributes

Global attributes

• Conditional processing attributes »
• Core attributes »
• Animation event attributes »
• Xlink attributes »
• Animation attribute target attributes »
• Animation timing attributes »
• Animation value attributes »
• Animation addition attributes »
• externalResourcesRequired

Specific attributes

• attributeName
• attributeType
• from
• to
• dur
• repeatCount

DOM Interface

This element implements the SVGAnimateElement interface.

Example

SVG

<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
  
  <rect x="10" y="10" width="100" height="100">
    <animate attributeType="XML" attributeName="x" from="-100" to="120"
        dur="10s" repeatCount="indefinite"/>
  </rect>
</svg>

Result

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 compatibilityUpdate compatibility data on GitHub