The SVG <animate>
element provides a way to animate an attribute of an element over time.
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>
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.
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 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
Specification | Status | Comment |
---|---|---|
SVG Animations Level 2 The definition of '<animate>' in that specification. |
Editor's Draft | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<animate>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
animate | Chrome Full support 2 | Edge Full support โค79 | Firefox Full support 4 | IE No support No | Opera Full support 9 | Safari Full support 4 | WebView Android Full support 4 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 4 | Samsung Internet Android Full support 1.0 |
attributeName | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
attributeType | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
dur | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
from | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
repeatCount | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
to | Chrome ? | Edge ? | Firefox ? | IE No support No | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown