The SVG <animate>
element provides a way to animate an attribute of an element over time.
The SVG <animate>
element provides a way to animate an attribute of an element over time.
<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>
Most notably: id
class
, style
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.
Specification |
---|
SVG Animations Level 2 # AnimateElement |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
animate |
2 | ≤79 | 4 | No | 9 | 4 | 4 | 18 | 4 | 10.1 | 4 | 1.0 |
attributeName |
No | No | No | No | No | No | No | No | No | No | No | No |
attributeType |
No | No | No | No | No | No | No | No | No | No | No | No |
dur |
No | No | No | No | No | No | No | No | No | No | No | No |
from |
No | No | No | No | No | No | No | No | No | No | No | No |
repeatCount |
No | No | No | No | No | No | No | No | No | No | No | No |
to |
No | No | No | No | No | No | No | No | No | No | No | No |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate