Ultima revisión 19/11/2012

Animate: Animaciones en SVG

SVG nos proporciona una manera sencilla de realizar animaciones. Antes de meterse en esta sección uno debería asegurarse de que entiende el código SVG básico, ya que este artículo usa muchas de las cosas ya explicadas con anterioridad. Aún así, si se está familiarizado con HTML y CSS3 debería ser capaz de entenderlo en una pequeña o mayor medida.

Hay cinco elementos disponibles que producen movimiento en SVG. Cada uno de ellos tiene un propósito diferente. Lo primero de todo para aprender a crear actividad en gráficos vectoriales escalables es entender los elementos y qué acciones se realizan. Una vez que comprendamos cada uno de ellos de forma individual, seremos capaces de hacer animaciones complejas.

Action vs. Motion

Para crear una animación, es crucial entender la diferencia que existe entre acción y movimiento. Con la acción, no hay movimiento dentro del gráfico, sólo cambia. Por ejemplo, cuando se cambia el color de una forma después de haber cargado el SVG, se le denomina acción ya que, la forma se mantiene en una posición fija. El movimiento, por el contrario, sigue un camino o rota y por tanto, podríamos decir que se modifica o transforma.

Tanto una acción como el movimiento puede aplicarse independientemente o a través de disparadores (triggers) como eventos de click, mouseover, hover, ...

Animate

Animate comienza mayoría de los procesos que requieren una acción en SVG, pero no aquellas que requieren transformación o movimiento.

Ejemplo (animate): Cambio de color de fondo

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(100, 100)">
        <rect x="-50" y="-50" width="100" height="100" rx="5" ry="5" style=" fill:darkgreen; stroke: darkgreen; stroke-width: 3; stroke-dasharray: 10, 5;">
            <animate attributeName="fill"  dur="5s" values="darkgreen;green;lightgreen;yellow;orange;peru;red;peru;orange;yellow;lightgreen;green;" repeatCount="indefinite"/>
        </rect>
    </g>
</svg>

Set

El elemento set es similar a animate. La diferencia está en el atributo final. Con animate, se indoca la duración de la acción. Por ejemplo, el cambio de color con un mouseover puede durar de 2 segundos y repetir un número infinito de veces. Con set, no hay duración. El color cambia sin duración ninguna asociada.

Ejemplo (set): Establecer propiedad

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="200" fill="white" stroke="white" stroke-width="0" />
    <ellipse cx="100" cy="100" rx="70" ry="50" fill="orange">
        <set attributeName="rx" to="50" begin="5s" />
    </ellipse>
</svg>

AnimateColor

AnimateColor es una manera de cambiar los colores de un gráfico o forma. Aunque el cambio de color se puede realizar con animate la diferencia con animateColor es que animateColor tiene 2 atributos que son from y to.

Hay que comentar que este elemento no está implementado en algunos navegadores por lo que decía antes. Se puede hacer lo mismo con animate y esta sí que la tienen todos los navegadores implementada hoy día.

Ejemplo (animateColor): Movimiento de Formas

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="200" stroke="black" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 200 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

AnimateMotion

AnimateMotion moverá la imagen o el gráfico a lo largo de un camino. Por ejemplo, una cuadrado irá a lo largo de una línea o curva. Esto es diferente que al mover el cuadrado del punto A al punto B. Con animateMotion, la forma comienza y termina en un punto, pero no necesariamente se mueve en línea recta.

Ejemplo (animateMotion): Movimiento de Formas

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="200" stroke="black" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animateMotion path="M 0 0 H 200 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

AnimateTransform

AnimateTransform es el elemento que funciona en combinación con los procesos de transformación. Cuando tratamos una imagen con transform se realiza de manera estática. Esto es porque modifica la imagen predefinida sin tener que rediseñarla de nuevo. AnimateTransform hace lo mismo, una vez cargada la imagen cambia la imagen en pantalla de forma progresiva y secuencial, haciendo un efecto de animación.

Ejemplo (animateTransform): Giro sobre su propio eje

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g transform="translate(100, 100)">
        <rect x="-50" y="-50" width="100" height="100" rx="5" ry="5" style=" fill:darkgreen; stroke: darkgreen; stroke-width: 3; stroke-dasharray: 10, 5;">
            <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="180" begin="0" dur="5s" repeatCount="indefinite" fill="freeze"/>
            <animate attributeName="fill"  dur="5s" values="darkgreen;green;lightgreen;yellow;orange;peru;red;peru;orange;yellow;lightgreen;green;" repeatCount="indefinite"/>
        </rect>
        <circle cx="0" cy="0" r="15" fill="black"/>
        <line x1="-200" y1="0" x2="200" y2="0" style="stroke: black;"/>
        <line x1="0" y1="-200" x2="0" y2="200" style="stroke: black;"/>
    </g>
</svg>

Ejemplo Avanzado 1: Animación de Engranajes

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="radialgradient1" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" >
            <stop offset="0" stop-color="#ff0000" stop-opacity="0.9" />
            <stop offset="100%" stop-color="#c20010" stop-opacity="0.9" />
        </radialGradient>
        <radialGradient id="radialgradient2" cx="50%" cy="50%" fx="50%" fy="50%" r="50%" >
            <stop offset="0" stop-color="peru" stop-opacity="0.9" />
            <stop offset="100%" stop-color="orange" stop-opacity="0.9" />
        </radialGradient>
    </defs>

<g>
        <circle r="30" cx="130" cy="100" fill="url(#radialgradient2)"/>
        <line x1="100" y1="100" x2="160" y2="100" stroke-width="1" stroke="rgba(0,0,0,0.8)" />
        <line x1="130" y1="70" x2="130" y2="130" stroke-width="1" stroke="rgba(0,0,0,0.8)" />
        <animateTransform attributeType="xml" attributeName="transform" type="rotate"
                from="0 130 100" to="360 130 100" dur="4s" repeatCount="indefinite"/>
    </g>
    <g>
        <circle r="30" cx="75" cy="120" fill="url(#radialgradient1)"/>
        <line x1="45" y1="120" x2="105" y2="120" stroke-width="1" stroke="rgba(0,0,0,0.8)" />
        <line x1="75" y1="90" x2="75" y2="150" stroke-width="1" stroke="rgba(0,0,0,0.8)" />
        <animateTransform attributeType="xml" attributeName="transform" type="rotate"
                from="410 75 120" to="50 75 120" dur="4s" repeatCount="indefinite"/>
    </g>
    <g>
        <circle r="15" cx="90" cy="80" fill="url(#radialgradient1)"/>
        <line x1="75" y1="80" x2="105" y2="80" stroke-width="1" stroke="rgba(120,0,0,0.8)" />
        <line x1="90" y1="65" x2="90" y2="95" stroke-width="1" stroke="rgba(120,0,0,0.8)" />
        <animateTransform attributeType="xml" attributeName="transform" type="rotate"
                from="75 90 80" to="435 90 80" dur="4s" repeatCount="indefinite"/>
    </g>
</svg>

Ejemplo Avanzado 2: Líneas de Moire

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="moire_arc_single"
                 d="M 0,0 L 0,2 A 2,2 0 0,0 0.10467,1.99726 L -0.10467,-1.99726 A 2,2 0 0,1 0,-2 Z"
                 stroke="none" fill="#45689a" />
        <path id="moire_arc_single2"
                 d="M 0,0 L 0,2 A 2,2 0 0,0 0.10467,1.99726 L -0.10467,-1.99726 A 2,2 0 0,1 0,-2 Z"
                 stroke="none" fill="#283a64" />

<use xlink:href="#moire_arc_single" transform="rotate(054)" />
        <g id="moire_arc_group_a">
            <use xlink:href="#moire_arc_single" transform="rotate(000)" />
            <use xlink:href="#moire_arc_single" transform="rotate(006)" />
            <use xlink:href="#moire_arc_single" transform="rotate(012)" />
            <use xlink:href="#moire_arc_single" transform="rotate(018)" />
            <use xlink:href="#moire_arc_single" transform="rotate(024)" />
            <use xlink:href="#moire_arc_single" transform="rotate(030)" />
            <use xlink:href="#moire_arc_single" transform="rotate(036)" />
            <use xlink:href="#moire_arc_single" transform="rotate(042)" />
            <use xlink:href="#moire_arc_single" transform="rotate(048)" />
            <use xlink:href="#moire_arc_single" transform="rotate(054)" />
            <use xlink:href="#moire_arc_single" transform="rotate(060)" />
            <use xlink:href="#moire_arc_single" transform="rotate(066)" />
            <use xlink:href="#moire_arc_single" transform="rotate(072)" />
            <use xlink:href="#moire_arc_single" transform="rotate(078)" />
            <use xlink:href="#moire_arc_single" transform="rotate(084)" />
            <use xlink:href="#moire_arc_single" transform="rotate(090)" />
            <use xlink:href="#moire_arc_single" transform="rotate(096)" />
            <use xlink:href="#moire_arc_single" transform="rotate(102)" />
            <use xlink:href="#moire_arc_single" transform="rotate(108)" />
            <use xlink:href="#moire_arc_single" transform="rotate(114)" />
            <use xlink:href="#moire_arc_single" transform="rotate(120)" />
            <use xlink:href="#moire_arc_single" transform="rotate(126)" />
            <use xlink:href="#moire_arc_single" transform="rotate(132)" />
            <use xlink:href="#moire_arc_single" transform="rotate(138)" />
            <use xlink:href="#moire_arc_single" transform="rotate(144)" />
            <use xlink:href="#moire_arc_single" transform="rotate(150)" />
            <use xlink:href="#moire_arc_single" transform="rotate(156)" />
            <use xlink:href="#moire_arc_single" transform="rotate(162)" />
            <use xlink:href="#moire_arc_single" transform="rotate(168)" />
            <use xlink:href="#moire_arc_single" transform="rotate(174)" />
            <animateTransform attributeName="transform" type="rotate" from="360" to="0" dur="24s" repeatCount="indefinite"/>
        </g>
        <g id="moire_arc_group_b">
            <use xlink:href="#moire_arc_single2" transform="rotate(000)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(006)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(012)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(018)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(024)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(030)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(036)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(042)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(048)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(054)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(060)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(066)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(072)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(078)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(084)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(090)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(096)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(102)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(108)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(114)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(120)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(126)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(132)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(138)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(144)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(150)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(156)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(162)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(168)" />
            <use xlink:href="#moire_arc_single2" transform="rotate(174)" />
            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="24s" repeatCount="indefinite"/>
        </g>
    </defs>
    <use xlink:href="#moire_arc_group_a" transform="translate(0.2 0)" />
    <use xlink:href="#moire_arc_group_b" transform="translate(-0.2 0)" />
</svg>

Ejemplo Avanzado 3: Kaleidoscopio

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="cp" clipPathUnits="userSpaceOnUse">
        <polygon points="0,0 173.2,100 173.2,-100"/>
        </clipPath>

        <g id="r1">
            <g>
                <g>
                    <rect x="-10" y="-10" width="20" height="20" stroke="blue" fill="blue" fill-opacity="0.5" />
                    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" values="0;359" repeatCount="indefinite"/>
                </g>
                <animateTransform attributeName="transform" type="translate" begin="0s" dur="2s" values="-20,0;195,-50" repeatCount="indefinite"/>
            </g>
            <g>
                <g>
                    <ellipse cx="-20" rx="20" ry="10" stroke="red" fill="red" fill-opacity="0.5" />
                    <animateTransform attributeName="transform" type="rotate" begin="1s" dur="3s" values="0;359" repeatCount="indefinite"/>
                </g>
                <animateTransform attributeName="transform" type="translate" begin="1s" dur="3s" values="195,50;-20,0" repeatCount="indefinite"/>
            </g>
            <g>
                <g>
                    <ellipse cx="-10" rx="10" ry="20" stroke="green" fill="green" fill-opacity="0.5" />
                    <animateTransform attributeName="transform" type="rotate" begin="2s" dur="3s" values="0;359" repeatCount="indefinite"/>
                </g>
                <animateTransform attributeName="transform" type="translate" begin="2s" dur="5s" values="85,-70;85,70" repeatCount="indefinite"/>
            </g>
        </g>
        <polygon id="pg1" points="0,0 173.2,100 173.2,-100" style="stroke: none; fill: none"/>
    </defs>
    <g transform="translate(100,100)">
        <g transform="rotate(0)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
        <g transform="rotate(60)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
        <g transform="rotate(120)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
        <g transform="rotate(180)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
        <g transform="rotate(240)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
        <g transform="rotate(300)" style="clip-path: url(#cp)">
            <use xlink:href="#pg1"/>
            <use xlink:href="#r1"/>
            <use xlink:href="#r1" transform="scale(1,-1)"/>
        </g>
    </g>
</svg>

A continuación se explican las propiedades de los elementos de animación que se pueden utilizar. No todas las propiedades valen para todos los elementos, aunque algunas sí, pero nos ayudarán a tener una idea acerca de qué usar y cuando.

Atributos de destino

Propiedad	Definición
attributeName	Especifica el nombre del atributo de destino. Se puede utilizar un prefijo xmlns para indicar el espacio de nombres XML para el atributo. El prefijo se interpretará en el ámbito del elemento de animación actual (es decir, la referencia).
attributeType	Especifica el espacio de nombres en el que se define el atributo de destino y sus valores asociados. El valor del atributo es uno de los siguientes valores que son sensibles a mayúsculas y minúsculas): CSS: Especifica que el valor de "attributeName" es el nombre de una de las propiedad CSS3 para realizar animaciones. XML: Especifica que el valor de "attributeName" es el nombre de un atributo XML que se define en el espacio de nombres XML predeterminado para el elemento de destino. Si el valor de 'attributeName' tiene un prefijo xmlns, la aplicación debe utilizar el espacio de nombres asociado tal como se define en el ámbito de aplicación del elemento de destino. El atributo debe ser definido como animatable en estos casos. auto: Especifica que el valor de "attributeName" debe de estar en el elemento destino. El valor por defecto es auto.

Propiedad

Definición

attributeName

Especifica el nombre del atributo de destino. Se puede utilizar un prefijo xmlns para indicar el espacio de nombres XML para el atributo. El prefijo se interpretará en el ámbito del elemento de animación actual (es decir, la referencia).

attributeType

Especifica el espacio de nombres en el que se define el atributo de destino y sus valores asociados. El valor del atributo es uno de los siguientes valores que son sensibles a mayúsculas y minúsculas):

CSS: Especifica que el valor de "attributeName" es el nombre de una de las propiedad CSS3 para realizar animaciones.
XML: Especifica que el valor de "attributeName" es el nombre de un atributo XML que se define en el espacio de nombres XML predeterminado para el elemento de destino. Si el valor de 'attributeName' tiene un prefijo xmlns, la aplicación debe utilizar el espacio de nombres asociado tal como se define en el ámbito de aplicación del elemento de destino. El atributo debe ser definido como animatable en estos casos.
auto: Especifica que el valor de "attributeName" debe de estar en el elemento destino.

El valor por defecto es auto.

Atributos de Control de Tiempo

Propiedad	Definición
begin	Define cuando debería empezar el elemento a animarse. Hay varias configuraciones posibles para este atributo, desde las más sencillas hasta muy complejas. Lo más frecuente es encontrase con uno de las siguientes configuraciones: Valores de tiempo: Se puede insertar un valor como 2s indicando que empiece 2 segundos después de terminar la carga. Valores Reales: Se puede insertar un valor como 0 indicando que empiece en en ángulo 0. Los valores reales normalmente van asociados a propiedades "animables" de CSS o XML o dicho de otra manera, van asociados a la propiedad attributeType="CSS" o attributeType="xml". Lista de Valores: Se puede insertar una lista de valores separándolos por el símbolo de puntuación punto y coma. Eventos: Es posible poner eventos como mouseover, click o eventos asociados a objetos como por ejemplo rect1.mouseout, rect1.click dónde rect1 es el id de un objeto <rect>. Combinación de eventos y valores: Podemos hacer combinaciones de eventos y valores como click+2s indicando que el inicio de la animación empiece a los 2 segundos después de hacer click.
end	Define cuando debería finalizar el elemento a animado. Hay varias configuraciones posibles para este atributo, desde las más sencillas hasta muy complejas. Lo más frecuente es encontrase con uno de las siguientes configuraciones: Valores de tiempo: Se puede insertar un valor como 2s indicando que termine a los 2 segundos iniciarse. Valores Reales: Se puede insertar un valor como 0 indicando que termine en en ángulo 0. Los valores reales normalmente van asociados a propiedades "animables" de CSS o XML o dicho de otra manera, van asociados a la propiedad attributeType="CSS" o attributeType="xml". Lista de Valores: Se puede insertar una lista de valores separándolos por el símbolo de puntuación punto y coma. Eventos: Es posible poner eventos como mouseover, click o eventos asociados a objetos como por ejemplo rect1.mouseout, rect1.click dónde rect1 es el id de un objeto <rect>. Combinación de eventos y valores: Podemos hacer combinaciones de eventos y valores como click+2s indicando que el final de la animación sea a los 2 segundos de empezar la animación.
dur	Especifica la duración. Puede tener 3 tipos de valor: Valor de Tiempo: Debe ser mayor que 0. 5s indica que la animación dura 5 segundos. media: Especifica la duración será definida de forma intrínseca al medio. Esto sólo es válido para los elementos de tipo vídeo o música. No se suele usar infitite: Especifica que la animación se repita una y otra vez. Infinita o indefinida. El valor por defecto es infinite. Hay que tener en cuenta que la interpolación no funcionará si la duración es infinite, aunque, puede ser útil si utilizamos elementos set.
min, max	Especifican el tiempo que durará como mínimo y como máximo la animación. Valor de Tiempo: Debe ser mayor que 0. 5s indica que la animación dura 5 segundos. media: Especifica la duración será definida de forma intrínseca al medio. Esto sólo es válido para los elementos de tipo vídeo o música. No se suele usar. El valor por defecto es 0.
restart	Establece o especifica cómo se realizará el rearranque o reinicio de la animación. always: La animación se puede reiniciar en cualquier momento. Este es el valor predeterminado. whenNotActive: La animación sólo se puede reiniciar cuando no está activa o una vez haya terminado. Los intentos para reiniciar la animación durante su reproducción se ignoran. never: La animación no puede ser reiniciada. El valor por defect es always.
repeatCount	Especifica el número de iteraciones de la animación. Valor Real: Se puede especificar 1,2 indicando que se repita 1 vez y se pare transcurrido el 20% de la segunda reproducción. indefinite: La animación se repetirá indefinidamente. El valor por defecto es indefinite.
repeatDur	Especifica la duración total de la repetición. Puede tener los siguientes valores de atributo: Valor Real: Se puede especificar 1,2 indicando que se repita 1,2 veces el tiempo total de la animación. indefinite: La animación se repetirá indefinidamente. El valor por defecto es indefinite.
fill	Especifica la duración total de la repetición. Puede tener los siguientes valores de atributo: freeze: Realiza un efecto de "congelación" de la imagen en curso hasta que termine la reproducción en curso o hasta que se reinicie. remove: La animación se elimina cuando la reproducción en curso termine. Después de que la animación termine ya no se puede reanudar ni reiniciar. El valor por defecto es indefinite.

Atributos de Valores de Animación en el tiempo

Propiedad	Definición
calcMode	Especifica el modo de interpolación para la animación. discrete: Especifica que la función de animación saltará de un valor a otro sin ninguna interpolación. linear: Especifica que el salto entre valores se haga de for lineal calculándolos por interpolación lineal simple. paced: Define una interpolación para producir cambios a través de la animación. Esto sólo es compatible con los tipos de datos para las que existe una función de la distancia apropiada definida, que incluye sólo los tipos escalares numéricos más los tipos enumerados en la animación a ritmo y tipos complejos. Si paced se especifica keyTimes y keySplines serán ignorados. No es muy recomendable debido a su comportamiento impredecible en algunos agentes de usuario. spline: Interpola de un valor en la lista de los values a otro de acuerdo a una función de tiempo definido por una curva cúbica de Bézier. Los puntos de la curva se definen en el atributo keyTimes, y los puntos de control para cada intervalo se define en el atributo keySplines. Esto puede tomar cualquiera de los valores siguientes. El modo por defecto es 'lineal', sin embargo, si el atributo no es compatible con interpolación lineal (por ejemplo, para cuerdas), el atributo 'calcMode' se ignora y la interpolación discreta se utiliza.
values	Es una lista separados por punto y coma de uno o más valores. El vector de valores debe ser compatible e ir en relación con la sintaxis vector de la attributeType. Los espacios en blanco permiten pero se ignorarán.
keyTimes	Es una lista separados por punto y coma de valores de tiempo utilizados para controlar la animación. Cada valor de tiempo en la lista de keyTimes se especifica como un valor de punto flotante entre 0 y 1 (ambos inclusive), lo que representa una proporción desplazamiento en el tiempo simple del elemento de animación. Para animaciones realizadas a través de values, este atributo, deberá contener el mismo número de valores. Para animaciones realizadas a través de from, to y by, este atributo, deberá tener 2 valores. En animaciones de tipo calcMode = "spline" o calcMode = "linear" el primer valor debe de ser 0 y el último 1. En animaciones de tipo calcMode = "discrete" el primer valor debe de ser 0. El tiempo asociado con cada valor se define cuando el valor se establece; la función de animación usa ese valor hasta la próxima vez que se defina en keyTimes. En animaciones de tipo calcMode = "paced" este atributo se ignora.
keySplines	Este atributo se ignora a menos que calcMode = "spline". Es una lista de puntos de control de Bézier asociados con la lista de keyTimes y separados por punto y coma, que definen una función cúbica de Bézier que controlan el intervalo de estimulación. Cada punto de control es un conjunto de cuatro valores: x1 y1 x2 y2, describiendo los puntos de control de Bézier para el segmento de tiempo. Los valores deben estar en el rango de 0 a 1.
from	Especifica el valor de inicio de la animación.
to	Especifica el valor final de la animación.
by	Especifica un valor de desplazamiento o el tamaño del paso relativo para la animación.

Atributos Adicionales

Propiedad	Definición
additive	Controla si la animación es aditiva. Tiene 2 posibles valores: sum: Especifica que la animación se sumará al valor del atributo subyacente y otras inferiores animaciones prioritarias. replace: Especifica que la animación va a sustituir el valor subyacente del atributo y otras inferiores animaciones prioritarios. El comportamiento se verá afectado por los atributos from, by y to. El valor por defecto es replace
accumulate	Controla si la animación es acumulativa. Tiene 2 posibles valores: sum: Especifica que cada iteración el primer valor será el último de la iteracción previa. none: Especifica que las iteraciones de la animación no son acumulativas. El valor por defecto es none

Propiedad

Definición

additive

Controla si la animación es aditiva. Tiene 2 posibles valores:

sum: Especifica que la animación se sumará al valor del atributo subyacente y otras inferiores animaciones prioritarias.
replace: Especifica que la animación va a sustituir el valor subyacente del atributo y otras inferiores animaciones prioritarios. El comportamiento se verá afectado por los atributos from, by y to.

El valor por defecto es replace

accumulate

Controla si la animación es acumulativa. Tiene 2 posibles valores:

sum: Especifica que cada iteración el primer valor será el último de la iteracción previa.
none: Especifica que las iteraciones de la animación no son acumulativas.

El valor por defecto es none