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