{"id":21276,"date":"2024-12-10T13:00:00","date_gmt":"2024-12-10T12:00:00","guid":{"rendered":"https:\/\/carontestudio.com\/blog\/?p=21276"},"modified":"2025-08-25T11:54:50","modified_gmt":"2025-08-25T09:54:50","slug":"guia-completa-como-crear-una-animacion-svg-con-css","status":"publish","type":"post","link":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/","title":{"rendered":"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Normalmente, cuando nos movemos en el mundo web, creamos animaciones o transiciones basadas en HTML, CSS y JavaScript. As\u00ed que a lo mejor ya has experimentado bastante usando estos. Pero, \u00bfqu\u00e9 ocurre si a\u00f1adimos un SVG y un poco de magia a esta combinaci\u00f3n?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En esta entrada, vamos a explorar c\u00f3mo darle movimiento a nuestras p\u00e1ginas al crear una <strong>animaci\u00f3n SVG con CSS<\/strong>. Veremos paso a paso llevar tus dise\u00f1os a otro nivel usando animaciones \u00fanicas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Convertir un texto a SVG<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">En este caso, animaremos un texto, aunque podr\u00edas hacer lo mismo con un logo u otro SVG. En nuestro ejemplo, el SVG tiene un solo <code>&lt;path&gt;<\/code> (m\u00e1s adelante explico esta etiqueta), pero si el SVG tuviera m\u00faltiples trazos, el proceso ser\u00eda m\u00e1s largo, aunque no m\u00e1s complicado.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yo he utilizado <a href=\"https:\/\/carontestudio.com\/blog\/que-es-figma-y-para-que-se-utiliza\/\" target=\"_blank\" rel=\"noreferrer noopener\">Figma<\/a>, pero puedes usar Adobe Illustrator u otro software de dise\u00f1o, incluso puedes utilizar el logo de tu marca <a href=\"https:\/\/carontestudio.com\/diseno-creatividad\">dise\u00f1ado por un equipo profesional<\/a>. De todas formas, yo te muestro aqu\u00ed c\u00f3mo exportar un texto en SVG desde Figma.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"280\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-1.png\" alt=\"pantallazo de figma con el svg a exportar\" class=\"wp-image-21280\" style=\"width:704px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-1.png 567w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-1-300x148.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n<\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Selecciona una fuente<\/strong>: En este caso he seleccionado una fuente que me ha llamado la atenci\u00f3n, he escrito mi nombre y he puesto el color de la fuente en blanco.<\/li>\n\n\n\n<li><strong>Ajusta el tama\u00f1o<\/strong>: He puesto el tama\u00f1o de la fuente en 96px, pero esto da igual, porque al ser un SVG, al variar el tama\u00f1o no va a alterar la calidad de la imagen.<\/li>\n\n\n\n<li><strong>Exporta en SVG<\/strong>: Haz clic en \u00abExport\u00bb, selecciona SVG y gu\u00e1rdalo en tu ordenador.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"295\" height=\"472\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-2.png\" alt=\"pantallazo de figma con el tipo de la fuente\" class=\"wp-image-21281\" style=\"width:242px;height:auto\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-2.png 295w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-2-188x300.png 188w\" sizes=\"auto, (max-width: 295px) 100vw, 295px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"224\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-3.png\" alt=\"pantallazo de Figma con las opciones de exportar\" class=\"wp-image-21282\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Insertar SVG en el c\u00f3digo<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Con el SVG descargado, puedes abrirlo en Visual Studio Code o tu editor de preferencia. Ver\u00e1s algo como esto:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"567\" height=\"86\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-4.png\" alt=\"c\u00f3digo svg\" class=\"wp-image-21283\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-4.png 567w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-4-300x46.png 300w\" sizes=\"auto, (max-width: 567px) 100vw, 567px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Es solo un fragmento de las primeras l\u00edneas de nuestro SVG, porque suelen ser bastante largos. Este c\u00f3digo es el que va a dibujar el SVG, son coordenadas con algunas instrucciones que permiten dibujar formas complejas que dan como resultado, en este caso el texto que hemos escrito previamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Este fragmento contiene las coordenadas y comandos que dibujan el SVG, en este caso el texto. Copia el c\u00f3digo completo y p\u00e9galo en tu HTML donde quieres que se muestre. Para que destaque, yo he creado dos <code>&lt;div&gt;<\/code>: uno para el fondo y otro como contenedor del SVG.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"207\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-5-1024x207.png\" alt=\"c\u00f3digo del svg\" class=\"wp-image-21284\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-5-1024x207.png 1024w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-5-300x61.png 300w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-5-768x156.png 768w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-5.png 1037w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Si en Figma, al crear el texto, lo hicimos demasiado peque\u00f1o, podemos modificarlo sin cambiar la calidad de la imagen, modificando el <em>width <\/em>y el <em>height.<\/em><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"339\" height=\"68\" src=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-6.png\" alt=\"c\u00f3digo del svg\" class=\"wp-image-21286\" srcset=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-6.png 339w, https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/image-6-300x60.png 300w\" sizes=\"auto, (max-width: 339px) 100vw, 339px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Inicializar estilos del SVG<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para animar un elemento SVG, debemos enfocarnos en la etiqueta <code>&lt;path&gt;<\/code>, que es la que define los vectores o trazados dentro del archivo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La funci\u00f3n principal de <code>&lt;path&gt;<\/code> es describir formas geom\u00e9tricas complejas mediante coordenadas, como l\u00edneas, curvas&#8230; Por ejemplo, un <code>&lt;path&gt;<\/code> puede representar desde una l\u00ednea recta, hasta un dibujo, como el contorno de una letra en una tipograf\u00eda, como es nuestro caso. Es por esto, que aunque se trate de un texto, al estar en SVG tiene propiedades espec\u00edficas que difieren de CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aunque estemos tratando con un texto, al estar dentro de un SVG tendr\u00e1 propiedades espec\u00edficas que difieren de las t\u00edpicas en CSS. Por ejemplo, en lugar de <code>color<\/code> o <code>background-color<\/code>, el SVG usar\u00e1 <code>fill<\/code> para definir el color del contenido de la forma. Adem\u00e1s, lo que normalmente conocemos como <code>border<\/code> en CSS, en SVG se traduce a <code>stroke<\/code>, que define el contorno del trazo, es importante entender esto para crear una animaci\u00f3n SVG con CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lo que tengo planteado para nuestro texto en SVG, es que parta de ser transparente y poco a poco vaya cogiendo color mientras que se va escribiendo el trazo de manera fluida. As\u00ed que para ello vamos a partir de estos estilos dados al path:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.title svg path {\n  fill: transparent;\n  stroke: #fff;\n  stroke-width: .2;\n  stroke-dasharray: 600;\n  stroke-dashoffset: 600;\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>fill: Define el color de relleno de la forma. Lo inicializamos en transparente para que sea invisible al inicio.<\/li>\n\n\n\n<li>stroke: Da color al trazo.<\/li>\n\n\n\n<li>stroke-width: Define el grosor del trazo. Por defecto trae de 1 y en mi caso particular me parec\u00eda demasiado grueso, as\u00ed que le puse 0.2.<\/li>\n\n\n\n<li>stroke-dasharray: esta propiedad nos permite crear un trazo en l\u00ednea discontinua, dividiendo el trazo en secciones dibujadas y no dibujadas. El valor que le asignamos a <code>stroke-dasharray<\/code> define, en unidades, cu\u00e1nto se dibuja y cu\u00e1nto se deja sin dibujar. Para encontrar el valor ideal que permita que el SVG se dibuje completamente, necesitamos hacer pruebas, ajustando los valores hasta que logremos que el trazo aparezca de manera continua. El valor en el que el trazo se vea completo ser\u00e1 nuestro valor inicial.<\/li>\n\n\n\n<li>stroke-dashoffset: con esta propiedad, le daremos un offset al stroke-dasharray, lo cual permitir\u00e1 que sea justo la parte donde se queda sin dibujar sea que se muestre, es por eso que va a tener el mismo valor que el anterior.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Animar el SVG<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora que tenemos listo los estilos iniciales, solo queda crear la animaci\u00f3n, para ello a\u00f1adimos una animaci\u00f3n que tarde unos 6 segundos de inicio a fin y que solo se ejecute una vez<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.title svg path {\n  fill: transparent;\n  stroke: #fff;\n  stroke-width: .2;\n  stroke-dasharray: 600;\n  stroke-dashoffset: 600;\n  animation: textAnimation 6s ease-in-out forwards;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed que solo nos quedar\u00eda variar el stroke-dashoffset y el fill para crear ese efecto de que aparece y se dibuja:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@keyframes textAnimation {\n  0% {\n    stroke-dashoffset: 600;\n  }\n  90% {\n    fill: transparent;\n  }\n  100% {\n    stroke-dashoffset: 0;\n    fill: #fff;\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Partimos de stroke-dashoffset igual a 600 y lo llevamos a 0 que es donde se va a mostrar el trazo completo, y le he a\u00f1adido un poco de retraso al fill para que no empiece la transici\u00f3n a blanco desde el inicio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para terminar lo podemos poner sobre un fondo y hacer un efecto de acercar dicho fondo a la vez que se dibuja el texto.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"300\" data-default-tab=\"result\" data-slug-hash=\"ZEgwjrr\" data-pen-title=\"CSS + SVG\" data-user=\"David-Boo\" style=\"height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/David-Boo\/pen\/ZEgwjrr\">\n  CSS + SVG<\/a> by David Boo (<a href=\"https:\/\/codepen.io\/David-Boo\">@David-Boo<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Crear una animaci\u00f3n SVG con CSS no solo agrega dinamismo a una p\u00e1gina web, sino que tambi\u00e9n permite aprovechar los beneficios de SVG en t\u00e9rminos de escalabilidad y nitidez. Puedes experimentar con distintos valores y ajustes, consiguiendo resultados creativos y \u00fanicos. Si quieres que tus p\u00e1ginas destaquen, las animaciones SVG son una buena opci\u00f3n para llamar la atenci\u00f3n del usuario y hacer que la experiencia visual sea memorable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Normalmente, cuando nos movemos en el mundo web, creamos animaciones o transiciones basadas en HTML, CSS y JavaScript. As\u00ed que a lo mejor ya has experimentado bastante usando estos. Pero, \u00bfqu\u00e9 ocurre si a\u00f1adimos un SVG y un poco de magia a esta combinaci\u00f3n? En esta entrada, vamos a explorar c\u00f3mo darle movimiento a nuestras [&hellip;]<\/p>\n","protected":false},"author":18,"featured_media":21443,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[94],"tags":[93],"class_list":["post-21276","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]<\/title>\n<meta name=\"description\" content=\"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]\" \/>\n<meta property=\"og:description\" content=\"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog de marketing | Caronte\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/carontewebstudio\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-10T12:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-25T09:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1250\" \/>\n\t<meta property=\"og:image:height\" content=\"737\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David Boo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"David Boo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/\"},\"author\":{\"name\":\"David Boo\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\"},\"headline\":\"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS\",\"datePublished\":\"2024-12-10T12:00:00+00:00\",\"dateModified\":\"2025-08-25T09:54:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/\"},\"wordCount\":1029,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/como-crear-una-animacion-SVG-con-CSS.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/\",\"name\":\"C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/como-crear-una-animacion-SVG-con-CSS.jpg\",\"datePublished\":\"2024-12-10T12:00:00+00:00\",\"dateModified\":\"2025-08-25T09:54:50+00:00\",\"description\":\"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/como-crear-una-animacion-SVG-con-CSS.jpg\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/11\\\/como-crear-una-animacion-SVG-con-CSS.jpg\",\"width\":1250,\"height\":737,\"caption\":\"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/guia-completa-como-crear-una-animacion-svg-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"name\":\"Blog de marketing | Caronte\",\"description\":\"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.\",\"publisher\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#organization\",\"name\":\"Caronte - Agencia de marketing\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"contentUrl\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/06\\\/caronte-agencia-de-marketing-logo.png\",\"width\":1090,\"height\":155,\"caption\":\"Caronte - Agencia de marketing\"},\"image\":{\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/carontewebstudio\\\/\",\"https:\\\/\\\/www.instagram.com\\\/caronte_studio\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@carontewebstudio\",\"https:\\\/\\\/www.youtube.com\\\/@carontewebstudio\",\"https:\\\/\\\/es.linkedin.com\\\/company\\\/carontewebstudio\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/#\\\/schema\\\/person\\\/b3de34e35d8ffffb7e620d1166ea5f52\",\"name\":\"David Boo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g\",\"caption\":\"David Boo\"},\"sameAs\":[\"http:\\\/\\\/carontestudio.com\"],\"url\":\"https:\\\/\\\/carontestudio.com\\\/blog\\\/author\\\/david-boo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]","description":"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]","og_description":"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.","og_url":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/","og_site_name":"Blog de marketing | Caronte","article_publisher":"https:\/\/www.facebook.com\/carontewebstudio\/","article_published_time":"2024-12-10T12:00:00+00:00","article_modified_time":"2025-08-25T09:54:50+00:00","og_image":[{"width":1250,"height":737,"url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg","type":"image\/jpeg"}],"author":"David Boo","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"David Boo","Tiempo de lectura":"6 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#article","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/"},"author":{"name":"David Boo","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52"},"headline":"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS","datePublished":"2024-12-10T12:00:00+00:00","dateModified":"2025-08-25T09:54:50+00:00","mainEntityOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/"},"wordCount":1029,"commentCount":0,"publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/","url":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/","name":"C\u00f3mo crear una animaci\u00f3n SVG con CSS [Gu\u00eda Completa]","isPartOf":{"@id":"https:\/\/carontestudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#primaryimage"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg","datePublished":"2024-12-10T12:00:00+00:00","dateModified":"2025-08-25T09:54:50+00:00","description":"Descubre c\u00f3mo hacer una animaci\u00f3n SVG con CSS paso a paso. Crea efectos din\u00e1micos en tus p\u00e1ginas web utilizando SVG y animaciones CSS.","breadcrumb":{"@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#primaryimage","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2024\/11\/como-crear-una-animacion-SVG-con-CSS.jpg","width":1250,"height":737,"caption":"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/carontestudio.com\/blog\/guia-completa-como-crear-una-animacion-svg-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/carontestudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Gu\u00eda completa: C\u00f3mo crear una animaci\u00f3n SVG con CSS"}]},{"@type":"WebSite","@id":"https:\/\/carontestudio.com\/blog\/#website","url":"https:\/\/carontestudio.com\/blog\/","name":"Blog de marketing | Caronte","description":"En nuestro blog encontrar\u00e1s art\u00edculos semanales sobre SEO, marketing online, programaci\u00f3n web y mucho m\u00e1s.","publisher":{"@id":"https:\/\/carontestudio.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/carontestudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/carontestudio.com\/blog\/#organization","name":"Caronte - Agencia de marketing","url":"https:\/\/carontestudio.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","contentUrl":"https:\/\/carontestudio.com\/blog\/wp-content\/uploads\/2025\/06\/caronte-agencia-de-marketing-logo.png","width":1090,"height":155,"caption":"Caronte - Agencia de marketing"},"image":{"@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/carontewebstudio\/","https:\/\/www.instagram.com\/caronte_studio\/","https:\/\/www.tiktok.com\/@carontewebstudio","https:\/\/www.youtube.com\/@carontewebstudio","https:\/\/es.linkedin.com\/company\/carontewebstudio"]},{"@type":"Person","@id":"https:\/\/carontestudio.com\/blog\/#\/schema\/person\/b3de34e35d8ffffb7e620d1166ea5f52","name":"David Boo","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18a3ceeedb69fb45810646b329f07e0675f1e3b50d53fd3cb7522332f8c15ee9?s=96&d=mm&r=g","caption":"David Boo"},"sameAs":["http:\/\/carontestudio.com"],"url":"https:\/\/carontestudio.com\/blog\/author\/david-boo\/"}]}},"_links":{"self":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21276","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/comments?post=21276"}],"version-history":[{"count":15,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21276\/revisions"}],"predecessor-version":[{"id":23076,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/posts\/21276\/revisions\/23076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media\/21443"}],"wp:attachment":[{"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/media?parent=21276"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/categories?post=21276"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carontestudio.com\/blog\/wp-json\/wp\/v2\/tags?post=21276"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}