index.md

---

title: <animate>
slug: Web/SVG/Element/animate
page-type: svg-element
tags:
  - Element
  - SVG
  - SVG Animation
browser-compat: svg.elements.animate

---

{{SVGRef}}

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

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

{{EmbedLiveSample('Example', 150, '100%')}}

Attributes

Animation Attributes

• Animation timing attributes

  • : {{SVGAttr("begin")}}, {{SVGAttr("dur")}}, {{SVGAttr("end")}}, {{SVGAttr("min")}}, {{SVGAttr("max")}}, {{SVGAttr("restart")}}, {{SVGAttr("repeatCount")}}, {{SVGAttr("repeatDur")}}, {{SVGAttr("fill")}}

• Animation value attributes

  • : {{SVGAttr("calcMode")}}, {{SVGAttr("values")}}, {{SVGAttr("keyTimes")}}, {{SVGAttr("keySplines")}}, {{SVGAttr("from")}}, {{SVGAttr("to")}}, {{SVGAttr("by")}}

• Other Animation attributes

  • : Most notably: {{SVGAttr("attributeName")}}, {{SVGAttr("additive")}}, {{SVGAttr("accumulate")}}

• Animation event attributes

  • : Most notably: {{SVGAttr("onbegin")}}, {{SVGAttr("onend")}}, {{SVGAttr("onrepeat")}}

Global attributes

• Core Attributes

  • : Most notably: {{SVGAttr('id')}}

• Styling Attributes

  • : {{SVGAttr('class')}}, {{SVGAttr('style')}}

• Event Attributes

  • : Global event attributes, Document element event attributes

Usage notes

This element implements the {{domxref("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 or equivalent User Agent client hint {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}} 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

{{Specifications}}

Browser compatibility

{{Compat}}