<animate>

El elemento animate de SVG se utiliza para animar un atributo o propiedad a través del tiempo. Normalmente se inserta dentro del elemento o referenciado con el atributo href.

Contexto de uso

Atributos

Atributos globales

• Conditional processing attributes »
• Core attributes »
• Animation event attributes »
• Xlink attributes »
• Animation attribute target attributes »
• Animation timing attributes »
• Animation value attributes »
• Animation addition attributes »
• externalResourcesRequired

Atributos específicos

• attributeName
• attributeType
• from
• to
• dur
• repeatCount

DOM

Este elemento implementa la interfaz de SVGAnimateElement.

Ejemplo

SVG

<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 version="1.1"
 xmlns="http://www.w3.org/2000/svg">
 <rect x="10" y="10" width="100" height="100">
 <animate
 attributeType="XML"
 attributeName="x"
 from="-100"
 to="120"
 dur="10s"
 repeatCount="indefinite" />
 </rect>
</svg>

Result

Sobre Accesibilidad

Las animaciones titilantes e intermitentes pueden causar dificultades a las personas con discapacidades cognitivas como Trastorno por Déficit de Atención con Hiperactividad (ADHD) además de causar ataques a personas con cinestosis, epilepsia, migranias o síndrome de sensibilidad escotópica.

Por favor, considerá ofrecer un mecanismo para pausar o deshabilitar las animaciones, como utilizando Reduced Motion Media Query.

Para más información (en inglés):

• 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

Especificaciones

Compatibilidad con navegadores