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

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.

Especificações

Specification
SVG Animations Level 2
# AnimateElement

Compatibilidade com navegadores

BCD tables only load in the browser