<animate>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

CategoriasElemento de animación
Contenido permitidoCualquier número de los siguientes elementos, en cualquier orden:
Elementos descriptivos

Atributos

Atributos globales

Atributos específicos

DOM

Este elemento implementa la interfaz de SVGAnimateElement.

Ejemplo

SVG

html
<?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):

Especificaciones

Specification
SVG Animations Level 2
# AnimateElement

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
animate
attributeName
attributeType
dur
fill
from
href
repeatCount
systemLanguage
to

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support