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