¿De qué trata esta lección?
Hay posibilidades de agregar movimiento a nuestra página web sin necesidad de escribir scripts. Podemos usar imágenes gif, pero en esta lección probaremos animaciones CSS y gráficos SVG. Las animaciones CSS pueden cambiar las propiedades CSS de los elementos HTML, lo que genera cambios visibles. Los gráficos SVG también pueden equiparse con un elemento <animation>. Este es un tema muy extenso para este curso, pero puedes leer e intentar aprender más sobre esto a posteriori.

Nueva regla CSS:
@keyframes - Esta regla se utiliza para definir una animación. Podemos definir y listar más estados a un elemento o clase HTML por la que debería pasar.

Nuevas propiedades CSS en esta lección:
animation-name - esta propiedad sirve para definir la animación utilizada en una etiqueta HTML o en una clase CSS. El valor agregado a la propiedad debe ser el nombre de la animación.

animation-duration – esta propiedad se utiliza para definir el tiempo que la animación debe durar en segundos o milisegundos.

animation-iteration-count – esta propiedad establece los tiempos en que la animación debe repetirse. Los valores posibles son números, si necesitamos un recuento de iteraciones concreto, o infinite (infinito), si la animación debe repetirse siempre que la página esté abierta.

animation-direction – esta propiedad tiene los valores posibles normal (por defecto), reverse (para jugar en el orden inverso), alternate (reproducción normal y reversa después), etc.

Nueva etiqueta HTML:
<svg> </svg>- esta etiqueta se usa para envolver descripciones de imágenes SVG (gráficos vectoriales escalables).

Nuevos elementos SVG:
<circle /> - describe un circulo. Con la propiedad cx y cy podemos marcar el centro del círculo, con la propiedad llamada r se establece el radio del círculo. Estas propiedades también se pueden establecer desde los archivos CSS. No necesita una etiqueta de cierre, pero no se debe olvidar incluir el carácter / después de los atributos.

<line /> - describe una línea. Necesitamos definir los dos puntos finales agregando valores a la propiedad x1, x2, y1, y2. Estas propiedades también se pueden establecer desde los archivos CSS. No necesitas una etiqueta de cierre, pero no debes olvidar el carácter / después de los atributos.

<text> </text> - Este elemento se utiliza para agregar texto a los gráficos. Con las propiedades x e y podemos definir el lugar donde aparecerá el texto.

<animate> - esta etiqueta se puede utilizar para anunciar animaciones a un elemento SVG. Hay atributos para esta etiqueta que debemos definir para lograr el cambio que deseamos. Necesitamos hacer referencia a la propiedad que queremos cambiar (attributeName), el id de los elementos SVG (xlink: href). Tenemos que definir el valor de inicio (from) y el valor de parada (to) para conseguir el cambio, definir la duración (dur). Por favor, revisa el ejemplo de esta lección para aprender a usar esta etiqueta.

Nuevas propiedades SVG:
stroke – Con esta propiedad podemos agregar un color al contorno (outline) de los elementos SVG.
stroke-width – Con esta propiedad podemos establecer el ancho de los contornos de los elementos SVG.
fill – Con esta propiedad podemos agregar el color con el que deben rellenarse los objetos SVG.

Guía:
SVG es la abreviatura de gráficos vectoriales escalables (Scalable Vector Graphics), lo que significa dibujos fácilmente redimensionables.

Al usar el dibujo SVG, verifica qué versiones actuales de los navegadores pueden manejar tu código.

Podemos usar la animación CSS para cambiar los elementos SVG, pero algunos atributos no se pueden cambiar con ella.

Hay más tipos de etiquetas de animación, que se pueden usar en SVG: <animateMotion>, <animateTransform>.

Ejemplo de animación CSS:


En el ejemplo anterior tenemos una oración marcada como un párrafo. Aplicamos una animación a este párrafo llamado change, dura 10 segundos.

La animación tiene cinco pasos que cambian el color del texto a diferentes tonos de verde, el tamaño del texto también está creciendo.

Ejemplo de dibujo SVG:


En este ejemplo, dibujamos dos líneas y un círculo en un espacio de dibujo de 200 por 200 píxeles. Definimos la posición de los elementos en los archivos HTML dejando el resto de configuraciones en el archivo CSS. Estas propiedades también se pueden definir en el archivo HTML.

El espacio de dibujo tiene un color de fondo (background-color) y un borde (border), definidos como en las lecciones anteriores para todas las demás etiquetas HTML.

Las líneas son de color rojo y tienen 2 píxeles de ancho. Estos atributos son especiales aplicados a los elementos SVG. El círculo no tiene relleno, solo tiene contorno.

Los números morados definen las coordenadas de las cuatro esquinas del espacio de dibujo y se agregan a la imagen para que veas cómo elegir las coordenadas para tus elementos.

Ejemplo de animación SVG:


En el ejemplo anterior, agregamos un identificador al círculo, por lo que podemos hacer referencia a él en la animación.

En la primera animación definimos el radio de los círculos, el atributo r y aumentamos su valor de 50 a 90 píxeles en 5 segundos. Después de la animación, el círculo retrocedería a un radio de 50 píxeles, sin utilizar el valor de congelación para el atributo de relleno.

La segunda animación se refiere al grosor de una de las líneas. La línea tiene una identificación que la animación puede usar y el ancho está cambiando de 1 píxel a 10 píxeles. Hay un atributo adicional en este inicio de animación: la segunda animación comienza después de que termine la primera.