animate
O elemento SVG <animate>
fornece uma maneira de animar um atributo de um elemento ao longo do tempo.
html
<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
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
Especificações
Specification |
---|
SVG Animations Level 2 # AnimateElement |
Compatibilidade com navegadores
BCD tables only load in the browser