Cómo agregar animación a SVG con CSS

Sep 13, 2025
Cómo
Image: Web Designer
[dieciséis] [Imagen: Diseñador web]

Cuando se trata de animar con SVGS, un desvío importante puede ser la idea de atascarse en las bibliotecas de Javascript. Sin embargo, esto no tiene que ser el caso. CSS puede manejar la selección de rutas individuales dentro de un SVG para crear efectos. Solo saber lo básico puede significar que es posible convertir los iconos planos y clichados en algo un poco más impresionante. Así que quizás sea el momento de correr a través de los pasos fundamentales de la optimización y animación de SVG. Cuando se integra en diferentes diseños, no tarda mucho en darse cuenta de que las posibilidades son infinitas.

Para obtener más inspiración de la moción, eche un vistazo a la guía de Blovo de Creative Ejemplos de animación CSS y cómo codificarlos.

Ahorre £ 100 con un ticket super temprano para Generar CSS , la conferencia web de un día organizada por Creative Blovo, revista Web Designer y Revista Net. Reservar aquí .

01. Crea y guarda

Primero, crea una SVG para trabajar. Para este tutorial, utilizaremos un simple gráfico hecho en Illustrator. Al usar Illustrator para exportar un SVG, reduzca el tamaño de la tabla de arte para que se ajuste al gráfico, luego haga clic en 'Guardar como'. Seleccione SVG del menú desplegable 'Guardar como tipo', luego 'código SVG ...' en el diálogo de opciones de SVG.

02. Optimizar para la web.

SVG screenshot

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar la imagen [Imagen: SVGOMG]

Cortar las etiquetas innecesarias hará que la imagen sea más fácil de tratar. Esto se puede hacer manualmente copiando el código a su editor favorito y eliminando etiquetas y metadatos vacíos. Alternativamente, un recurso fantástico llamado Svgomg lo hará automáticamente. Pegue el código en el área 'Pasta' 'en la interfaz SVGOMG, luego copie la imagen nuevamente usando el botón en la parte inferior derecha.

03. Configurar un documento HTML

Abra su editor de código de elección y configure un documento HTML en blanco. Escribiremos la animación CSS en un archivo llamado main.csss , Así que crea esto también. Para mantener las cosas enfocadas en la animación, hemos tirado de la versión de Sólo CSS de Bootstrap 4.1.3.

04. Construir el diseño.

Vamos a construir los huesos de nuestro diseño y hagamos un espacio para nuestra SVG. Hemos agregado un encabezado y dos columnas: una a la izquierda para un texto, y una a la derecha, que mantendrá la SVG que estaremos animando. Para animar la página, use un segundo, estático, SVG como fondo en la etiqueta del cuerpo.

05. Coloque la SVG

Estamos usando nuestra animación para hacer que la introducción en la parte superior de la página sea más interesante. Pegue el código SVG optimizado en la segunda columna en la página. Si usa Bootstrap, dé la clase SVG IMG-FLUIDO Para asegurarse de que se escamaya en los móviles.

06. Añadir clases a la SVG

Agregar clases a la SVG permite que CSS seleccione las formas individuales dentro de la imagen. Esto significa que puede animar diferentes formas de la imagen en diferentes momentos, creando un efecto más complejo. 

 & lt; svg & gt;
& lt; g & gt;
& lt; CLASS CLASS = "RECTBRONGGROUND" ANCHUH = "147.4107"
altura = "68.7917" x = "31.2946" y = "114.1042"
rx = "4.5882" ry = "3.9565" rellish = "# 2a7fff" / & gt;
& lt; Class Class = "RectText" D = "..." Vector-Effect = "No-Stroke-Stroke" Stroke-Width-Width = ". 470476156" Font-size = "12" Fill = "# FFF"
Relleno = "Everodd" Stroke = "# FFF" Stroke-Linecap = "Round" / & GT;
& lt; / g & gt;
& lt; / svg & gt;

07. estados iniciales

Seleccionar nuestros elementos SVG en CSS es el mismo que cualquier otro elemento. Utilizamos nuestras clases para seleccionar esos elementos dentro de la SVG. Ambas partes de nuestro SVG comenzarán como ocultas cuando la página se carga, así que usemos CSS para configurar la opacidad de ambos elemento 0 . 

 Path.RectText {
Opacidad: 0;
}
rect.rectbackground {
Opacidad: 0;
}

08. Declarar las animaciones.

Necesitamos declarar el nombre y los fotogramas clave para cada animación para que CSS sepa lo que queremos hacer cuando le pedimos que realice un efecto. He elegido letra de texto y rectifia , como describen cada animación. rectifia Será una simple animación de dos pasos. letra de texto Tendrá un paso medio extra. 

@keyframes textdraw {
0% {}
50% {}
100% {}
}
@keyframes rectfade {
desde{}
a{}
}

09. Asignar animación y propiedades.

SVG and coding

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar la imagen [Imagen: Joseph Ford]

Añadimos el rectifia animación a la rectificado Elemento y dale una duración de un segundo. Un Facilitarse Bezier cúbico se está utilizando para darle una sensación más suave. Añadimos hacia adelante Por lo tanto, el elemento mantiene las propiedades del último fotograma clave cuando finaliza la animación. 

 rect.rectbackground {
Opacidad: 0;
Animación: RECTFADE 1S CUBIC-BEZIER (0.645,
0.045, 0.355, 1) hacia adelante;
}

10. La animación del rectángulo.

SVG image

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar la imagen [Imagen: Joseph Ford]

Con solo dos fotogramas clave, todo lo que necesitamos para hacer para nuestro rectángulo está configurado con un conjunto de atributos de inicio y finalización. Vamos a empezar con un 1% Ancho y acabado en 100% Para dar un 'expansión al efecto correcto'. También podemos establecer Opacidad: 1 al último fotograma clave, por lo que la forma se desvanece al mismo tiempo. 

 @KeyFrames RECTFADE {
desde {
Ancho: 1%;
}
a {
Ancho: 100%;
Opacidad: 1;
}
}

11. La animación de texto.

Vamos a crear un efecto de dibujo de línea en nuestro texto, use un relleno para desvanecer. Para configurar la animación de texto que le damos nuestro letra de texto Con una duración de cuatro segundos. El Bezier cúbico se ha modificado en este paso para darle un ritmo de movimiento ligeramente diferente. 

 Path.RectText {
Opacidad: 0;
Animación: TEXTDRAW 4S
Cubic-Bezier (.56, -0.04, .32, .7) hacia adelante;
}

12. retrasar el inicio

Nuestro texto debe ejecutarse justo cuando el rectángulo ha terminado de desvanecerse. Debido a que el rectángulo tiene una duración de un segundo, retrasa el inicio de la animación de texto en ese momento. 

 Path.RectText {
Opacidad: 0;
Animación: TEXTDRAW 4S
Cubic-Bezier (.56, -0.04, .32, .7) hacia adelante;
Animación-retraso: 1s;
}

13. Emular el dibujo de la línea.

SVG animation

[dieciséis] Haga clic en el icono en la parte superior derecha para ampliar la imagen [Imagen: Joseph Ford]

Para obtener nuestro efecto de dibujo de línea usaremos el Stroke-Dasharray y Stroke-Dashoffset parámetros. Sus valores serán diferentes a los míos, dependiendo de la SVG que está utilizando. Para encontrar su valor, use sus herramientas de desarrollador preferidas y aumente Stroke-Dasharray desde 0 Hasta que toda la forma esté cubierta por un golpe. 

 Path.RectText {
Opacidad: 0;
Stroke-Dasharray: 735;
Animación: TEXTDRAW 4S
Cubic-Bezier (.56, -0.04, .32, .7) hacia adelante;
Animación-retraso: 1S;
}

14. Primera línea Dibujo Cayo Frame

Ahora tenemos nuestro único accidente cerebrovascular muy grande que cubre toda la ruta de texto, compensemos por su propia longitud para empujarlo de manera efectiva. Usando Stroke-Dashoffset por el mismo valor que nuestro dasharray Deberías hacerlo. Vamos a configurar esto en nuestro primer fotograma clave. También haremos que la forma se rellene transparente y establezca el golpe en blanco si aún no lo es. 

 0% {
RELLENO: RGB (255, 255, 255, 0);
Stroke: #fff;
Stroke-Dashoffset: 800;
Opacidad: 1;
}

15. Dibuja las líneas.

Nuestro fotograma clave medio aparece en 40% a través de la animación. Traemos el Stroke-Dashoffset Volver a cero para que el tablero cubra todo el camino. Podemos volver a agregar el relleno transparente en esta etapa para asegurarse de que el relleno solo aparezca una vez que se complete el dibujo. 

 40% {
Stroke-Dashoffset: 0;
RELLENO: RGB (255, 255, 255, 0.0);
}

16. Rellene la forma.

Para la última parte de la animación, llenaremos la forma en blanco. Todo lo que necesitamos hacer para el último fotograma clave se eleva el valor alfa del color de llenado. Esto crea el efecto de desvanecimiento del relleno. 

 100% {
RELLENO: RGB (255, 255, 255, 1);
Stroke-Dashoffset: 0;
Opacidad: 1;
}

generate conference

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Comprar emito 286 o suscribir .

Leer más:

  • Añadir filtros SVG con CSS
  • Cómo diseñar con formas CSS: una introducción
  • Cómo codificar efectos de texto inteligentes con CSS

Cómo - Artículos más populares

Tipografía de marca: una guía completa

Cómo Sep 13, 2025

[dieciséis] Pentagram creó un tipografía a medida para el teatro público. (Crédito de la imagen: Pentagrama para el públic..

Cómo dibujar una nariz

Cómo Sep 13, 2025

[dieciséis] Dominar cómo dibujar una nariz es una de las partes más difíciles de dibujar una cara. Tal vez sea la diversidad de las..

Cómo diseñar una cubierta de libro en InDesign

Cómo Sep 13, 2025

El dicho podría ser: 'No juzgues un libro por su portada', pero el diseño de una portada puede, de hecho, hacer o romper el éxito de un libro. Si eres como yo, el diseño de la portada es ..

Convierte una foto en un conjunto VR

Cómo Sep 13, 2025

[dieciséis] Típicamente, cuando alguien menciona la realidad aumentada o la realidad virtual, podrían estar pensando en los videojue..

Cómo obtener más de GIFS

Cómo Sep 13, 2025

[dieciséis] Los GIFs trabajan en ciclos perfectos, que Rebecca Mock describe como 'el bucle perfecto'. Este bucle debe borrar ideal..

Cómo crear una reina hada vívida

Cómo Sep 13, 2025

[dieciséis] Se le pide que pinte una reina de hadas de mala culo por nada que no sea mi revista favorita, ImagineFX, me emocionó much..

Descubre el estilo y la sustancia de la tipografía

Cómo Sep 13, 2025

Decisiones, decisiones, decisiones ... Si hay un aspecto clave al proceso de trabajar con el tipo, es que el diseñador o tipografo deberá hacer una gran cantidad de decisiones antes de lleg..

Cómo crear un banner web animado en Photoshop

Cómo Sep 13, 2025

La creación de banners web no es la más glamorosa de los empleos en el mundo, pero es algo que todos los diseñadores deberán hacer en algún momento de su carrera, probablemente muchas ve..

Categorías