Veinte animaciones SVG en vivo con código para copiar: trazado de líneas, loaders, transiciones de iconos, barras de gráfico que crecen y morphing de trazados, además de CSS vs SMIL vs GSAP y SVG vs Lottie.
La animación SVG mueve o redibuja formas vectoriales con CSS, SMIL o JavaScript. Los keyframes de CSS se encargan de las transformaciones, la opacidad y el truco de dibujo de líneas con stroke-dasharray y stroke-dashoffset. Las etiquetas SMIL como <animate> pueden transformar trazados y seguir trayectorias sin scripts. Bibliotecas como GSAP añaden líneas de tiempo y control con el scroll. Lottie es ideal para animaciones de After Effects creadas por diseñadores.
Qué técnica usar para cada efecto
Cada animación de esta página se ejecuta en vivo a partir del código que tiene al lado, en un marco con los scripts desactivados, así que lo que copias es exactamente lo que funciona sin JavaScript. Además, cada una se detiene para los visitantes que piden movimiento reducido a su sistema. Arriba, un generador de dibujo de líneas escribe el truco del trazo para cualquier path que pegues.
Dale al trazo un guion tan largo como el path con stroke-dasharray, sácalo de la vista con un stroke-dashoffset igual y luego anima el desplazamiento hasta 0. El guion se desliza a su sitio y la línea parece dibujarse sola. pathLength="1" te permite usar 1 para ambos valores.
No. Chrome anunció en 2015 un plan para retirarlo y después suspendió ese plan. Los elementos SMIL como animate, animateTransform y animateMotion funcionan en todos los navegadores principales actuales y forman parte de la especificación SVG.
En parte. La propiedad CSS d acepta valores path() y se puede animar en navegadores Chromium y en Firefox, pero Safari no la soportaba en el momento de escribir esto, así que consulta caniuse. Ambos paths deben tener el mismo número y tipo de comandos. SMIL animate sobre el atributo d funciona en más navegadores.
Usa SVG simple con CSS para iconos, loaders e ilustraciones sencillas que puedas describir en código. Usa Lottie cuando un diseñador de motion crea en After Effects un personaje o una escena compleja y quieres reproducirlo con fidelidad. Lottie necesita una biblioteca de reproducción; el SVG simple no.
Envuelve las animaciones CSS en una media query prefers-reduced-motion o desactívalas dentro de ella. CSS no puede pausar SMIL, así que muestra una versión estática del gráfico en esa media query, o ejecuta pauseAnimations() sobre el elemento svg desde un script.
Las veinte funcionan sin JavaScript e incluyen una regla de movimiento reducido. Edita cualquiera directamente.
El clásico truco del trazo con pathLength=1, para que los valores del guion no dependan de la longitud real.
Un path más largo dibujado despacio con un easing lineal parece una pluma en movimiento.
Un círculo con un guion parcial gira; transform-box mantiene el giro centrado.
Valores escalonados de animation-delay convierten un único conjunto de keyframes en una ola.
Escala y desvanecimiento a la vez para un radar o un indicador en directo.
Cada barra escala en el eje Y desde su base con su propia duración.
Las barras crecen una vez al cargar. Usar forwards conserva el estado final, y la regla de movimiento reducido simplemente muestra el gráfico terminado.
La misma idea del guion sobre un círculo. Gíralo -90 grados para que empiece arriba.
Pasa el ratón o pon el foco en el botón. Cada línea se mueve y gira con una transición, sin necesidad de keyframes.
Dos pasos rápidos de escala y luego una pausa, todo en una sola lista de keyframes.
Funciona en Chromium y Firefox. Donde d no está soportada, la forma se queda como un cuadrado. Ambos paths usan los mismos comandos en el mismo orden.
SMIL cambia el propio atributo d, que tiene más soporte que la propiedad CSS d. La copia estática se muestra con movimiento reducido.
rotate=auto gira la forma para que mire hacia la dirección del movimiento.
Los valores de rotate toman el punto central como su segundo y tercer número.
SMIL anima los colores de las paradas del degradado, algo que también pueden hacer los keyframes de CSS sobre stop-color.
Un path el doble de ancho que la vista se desliza a la izquierda exactamente un periodo, así que el bucle no tiene costura.
Rotación desde la parte superior de la campana, activada al pasar el ratón o con el foco del teclado.
Un trazo discontinuo con un desplazamiento animado, el aspecto de un cuadro de selección en los editores de imágenes.
Guiones cortos sobre una línea curva se mueven sin parar para sugerir una dirección.
El aplastamiento al impactar transmite el peso. transform-origin en la base mantiene la pelota en el suelo mientras se aplasta.
Tres formas de animar SVG
Solo código, porque los marcos de demostración tienen los scripts desactivados. GSAP es de uso gratuito bajo su propia licencia, que no es MIT, así que lee sus condiciones antes de publicar.
Estrella
Ola
Casa
Repetir
Tu sistema pide movimiento reducido, así que el dibujo se muestra terminado. Pulsa Repetir para reproducirlo una vez.
Datos del path (atributo d)
Duración: {n}s
Grosor del trazo: {n}
Easing
Color
SVG y CSS
Copiar código
Empieza gratis · Sin tarjeta de crédito