<animate>

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

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>

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.

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

Browser compatibility

BCD tables only load in the browser