<animate>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

Usage context

Categories	Animation element
Permitted content	Any number of the following elements, in any order: Descriptive elements

Attributes

This element only includes global attributes.

DOM Interface

This element implements the SVGAnimateElement interface.

Example

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

html

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

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 or equivalent User Agent client hint Sec-CH-Prefers-Reduced-Motion to create a complimentary experience for users who have expressed a preference for no animated experiences.

Specifications

Specification
SVG Animations Level 2 # AnimateElement