animate
O elemento SVG <animate>
fornece uma maneira de animar um atributo de um elemento ao longo do tempo.
<svg viewBox="0 0 10 10" xmlns="https://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 (en-US)
,dur (en-US)
,end (en-US)
,min (en-US)
,max (en-US)
,restart (en-US)
,repeatCount (en-US)
,repeatDur (en-US)
,fill
- Animation value attributes
calcMode (en-US)
,values (en-US)
,keyTimes
,keySplines (en-US)
,from (en-US)
,to (en-US)
,by (en-US)
- Other Animation attributes
-
Most notably:
attributeName (en-US)
,additive (en-US)
,accumulate (en-US)
- Animation event attributes
Global attributes
- Core Attributes
-
Most notably:
id (en-US)
- Styling Attributes
class
,style
- Event Attributes
Usage notes
This element implements the SVGAnimateElement
(en-US) 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 (en-US) 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 (en-US)
- 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. |
Rascunho editorial | No change |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<animate>' in that specification. |
Recomendação | Initial definition |
Compatibilidade com navegadores
BCD tables only load in the browser