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="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 (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
- Most notably:
onbegin
,onend
,onrepeat
Global attributes
- Core Attributes
- Most notably:
id (en-US)
- Styling Attributes
class
,style
- Event Attributes
- Global event attributes, Document element 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 to create a complimentary experience for users who have expressed a preference for no animated experiences.
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