Una guía para principiantes de animación SVG con CSS

Los gráficos vectoriales escalables (SVG) son más que simples archivos de imagen. Como una aplicación XML, los SVG contienen marcas que se ven y funcionan de manera muy similar a HTML. También puede usarlos junto con código CSS y JavaScript. Esto hace posible animar archivos SVG, creando imágenes complejas que funcionan bien para el diseño web y otros entornos dinámicos.

Pero, ¿cómo se hace una animación SVG? Comience con una forma SVG, anímela usando CSS y aproveche estos principios para usar la animación en su propio trabajo.

Animación de SVG con HTML y CSS

Aunque puede usar JavaScript para animar archivos SVG mediante programación, CSS ahora también tiene un buen soporte para animaciones. Puede encontrar todo el código de ejemplo en el CodePen para este proyecto.

Creación de una imagen SVG dentro de HTML

El primer paso en este proceso es crear la imagen SVG con la que trabajará. Puede encontrar el marcado SVG en el panel HTML en CodePen.

Estructura SVG

Si bien los SVG comparten un formato similar al HTML, las etiquetas que usa para crearlos son diferentes. Un SVG tiene etiquetas de apertura y cierre () que puede contener una variedad de propiedades diferentes. En nuestro caso, estamos usando

identificación y viewBox propiedades. La propiedad id funciona como cualquier otro ID de HTML, brindándole un identificador único para usar en su CSS/JS. La propiedad viewBox establece el tamaño de nuestro SVG.

<!-- SVG con un tamaño adaptable -->
<identificación de svg ="MUOSVGAnimación" viewBox="0 0 800 600">
<!-- Contenido SVG -->
</svg>

Puede usar las propiedades de ancho y alto en su lugar, como lo demuestra el siguiente ejemplo. Sin embargo, viewBox crea un SVG receptivo que coincidirá con el tamaño de la ventana gráfica sin romper su relación de aspecto.

 SVG con un tamaño estático 
<identificación de svg ="MUOSVGAnimación" ancho ="800" altura="600">
<!-- Contenido SVG -->
</svg>

formas SVG

Puede crear imágenes detalladas con SVG, con una variedad de herramientas de diferentes formas a su disposición. Este ejemplo de SVG usa tres de las formas disponibles, pero hay muchas otras. Cada una de las formas en este ejemplo tiene una identificación única que las animaciones CSS pueden usar más adelante.

• Elipse SVG: Esta es una herramienta circular/ovalada. Especifica propiedades para el radio del eje y/x (rx/ry), el color de relleno y el ancho del trazo. Es importante recordar que el radio que elija con esta herramienta será la mitad del diámetro de la forma.

<identificación de elipse ="circulo" rx="100" ry="100" llenar ="#ffed00" ancho de trazo ="0"/>

• SVG Rect: la herramienta SVG rect crea un cuadrado o un rectángulo. Este tiene propiedades para ancho/alto, una transformación, color de relleno y ancho de trazo.

<id rect="cuadrado" ancho ="200" altura="200" transformar ="traducir (300 200)" llenar ="#05f"
 ancho de trazo ="0"/>

• Polígono SVG: use un polígono SVG para establecer un número específico de puntos y crear formas arbitrarias de diferentes tamaños. El polígono del ejemplo tiene tres lados, lo que lo convierte en un triángulo, y puedes ver la posición de cada punto trazado en sus propiedades. Junto con esto, tenemos propiedades para la posición, el color de relleno y el ancho del trazo del triángulo.

<id de polígono ="triángulo" puntos="15,-97 115,102 -84,102 15,-97"
 transformar ="traducir (0,0)" llenar ="#f00" ancho de trazo ="0"/>

Una vez que la animación esté en su lugar, las formas se alinearán una al lado de la otra.

Estas tres formas SVG son algunas de las más comunes, pero hay más para elegir. Puedes usar las siguientes formas cuando trabajando con una animación SVG:

• Círculo SVG: esta forma es similar a una elipse, pero siempre tiene radios X e Y iguales.
• Línea SVG: Una línea SVG es un segmento de una sola línea con dos puntos, uno en cada extremo.
• Polilínea SVG: Las polilíneas son como líneas básicas, solo que pueden tener más de dos puntos.
• Polígono SVG: los polígonos SVG son como rectángulos, solo que pueden tener más de cuatro puntos, lo que hace posibles formas complejas.
• Ruta SVG: las rutas SVG funcionan de manera similar a la herramienta Pluma en Adobe Photoshop. Las líneas se pueden conectar como una polilínea/polígono, pero también se les pueden aplicar curvas.

Cómo animar archivos SVG con CSS

Ahora que tiene algunas formas dentro de su SVG, es hora de pasar a la animación CSS. Cada una de las formas tiene una animación diferente para demostrar algunas de las opciones que tiene, pero hay muchas más para explorar con sus propios diseños. El círculo se mueve por la pantalla, las esquinas del cuadrado se vuelven redondas y el triángulo gira. Todos estos uso Fotogramas clave CSS para crear animaciones fluidas.

Mover el círculo usando Transformar y Trasladar

El círculo en el ejemplo de SVG se mueve desde la parte inferior hasta la parte superior de la pantalla durante su ciclo de animación. Debe asignar una animación al círculo antes de que pueda moverse, a través de una propiedad CSS:

#circulo {
 animación: circle_anim 2000ms lineal infinito normal adelante
}

La primera palabra en el valor, círculo_anim, es un nombre para la animación. Funciona durante dos segundos (2000ms). Tiene un lineal curva que mantiene su velocidad constante y está configurada para ejecutar una infinito número de veces en el hacia adelante dirección. Puede utilizar fotogramas clave para definir fases individuales de la animación:

@fotogramas clave circle_anim {
 0% { transformar: traducir(155px, 305px) }
 45% { transformar: traducir(155px, -123px) }
 50% { transformar: traducir(-123px, -123px) }
 55% { transformar: traducir(-123px, 728px) }
 60% { transformar: traducir(155px, 728px) }
 100% { transformar: traducir(155px, 305px) }
}

Hay seis fotogramas clave en esta animación, por lo que el círculo se moverá a seis ubicaciones diferentes en cada ciclo. los transformar: traducir La propiedad establece la posición del círculo en cada etapa. Al 0 %, el círculo está en el medio de la pantalla y se mueve hacia arriba y fuera de la vista en un 45 %. En un 50 % se ha movido a la izquierda de la pantalla antes de moverse hacia abajo por debajo de la ventana gráfica en un 55 %. El círculo vuelve a su posición horizontal en un 60 % y la animación se completa al 100 % con el círculo nuevamente en el centro de la pantalla.

Animar la propiedad del radio del borde del cuadrado

El cuadrado del ejemplo ofrece una buena referencia para animaciones de propiedades generales. Siempre que conozca la sintaxis correcta que debe usar, puede animar cualquier propiedad CSS. La propiedad border-radius es una buena demostración de esto. El cuadrado tiene esquinas afiladas que se convierten en esquinas redondeadas y luego nuevamente en esquinas cuadradas.

#cuadrado { animación: cuadrado_anim 2000ms reenvíos normales infinitos de entrada y salida }

La animación cuadrada se llama square_anim y tiene un tiempo de ejecución de dos segundos. los facilidad de entrada y salida curve hace que la animación sea más lenta al principio y al final, creando un efecto suave.

@fotogramas clave cuadrado_anim {
 0% { receta: 0px; ry: 0px }
 45% { receta: 40px; ry: 40px }
 55% { receta: 40px; ry: 40px }
 100% { receta: 0px; ry: 0px }
}

Como puede ver, esta animación tiene cuatro fotogramas clave. El radio del borde X e Y cambia de 0px a 40px entre 0% y 45%, deteniéndose en 40px hasta 55%. Luego vuelve a 0px para cada radio cuando la animación alcanza el 100%.

Rotar el Triángulo SVG con Transformar

La animación SVG final en el ejemplo es la más simple, con el triángulo girando alrededor de su punto central. La forma completa una revolución completa cada dos segundos y continúa funcionando infinitamente. Tiene una curva de salida que hace que la animación se ralentice al final. La animación se llama Triangle_anim.

#triángulo { animación: triangulo_anim 2000ms hacia adelante infinito normal de salida }

Esta animación tiene dos fotogramas clave, uno al 0% y otro al 100%. La propiedad Transformar rotar gira el triángulo de 0 grados al 0 % a 360 grados al 100 %, creando un giro completo.

@fotogramas clave triángulo_anim {
 0% { transformar: traducir(644px, 297px) girar(0 grados) }
 100% { transformar: traducir(644px, 297px) girar(360 grados) }
}

Cómo animar otras propiedades

Las tres animaciones cubiertas anteriormente son un buen punto de partida cuando trabaja con SVG, pero es probable que desee llevar esto más lejos. Puede usar la regla de animación CSS para ajustar casi cualquier valor de propiedad que pueda asignar a su SVG. Esto incluye valores básicos, como tamaño y posicionamiento, así como valores más avanzados, como bordes, sombras y modos de fusión.

En casos excepcionales en los que CSS no puede hacer el trabajo, puede usar código JavaScript para animar imágenes SVG. Puede encontrar muchas guías que lo ayudarán con esto una vez que se sienta listo para dar el siguiente paso con sus SVG.

Hacer tus propias animaciones SVG

Ya sea que sea un diseñador web, un desarrollador de software o simplemente una persona creativa, las animaciones SVG pueden ser divertidas y satisfactorias de hacer. Puede encontrar muchos recursos en la web que pueden ayudarlo con la animación basada en la web, una vez que se sienta cómodo con los conceptos básicos.

10 patrones de fondo CSS que puedes usar en tu sitio web

Leer siguiente