{"id":10984,"date":"2020-12-04T14:04:17","date_gmt":"2020-12-04T12:04:17","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=10984"},"modified":"2020-12-23T12:36:45","modified_gmt":"2020-12-23T10:36:45","slug":"como-animar-backgrounds-degradados-en-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/","title":{"rendered":"Como animar backgrounds degradados en CSS"},"content":{"rendered":"

En este articulo, aprenderemos como animar backgrounds degradados en CSS<\/strong>. Los degradados son considerados como im\u00e1genes de fondo y no podemos configurar una transici\u00f3n para la propiedad background-image.<\/p>\n

Lo que por suerte podemos hacer, es animar la posici\u00f3n de los backgrounds (fondos). Lo que nos permitir\u00e1 hacer cosas divertidas en termino de dise\u00f1o. As\u00ed que vamos a ver como crear un efecto de cambio de colores para botones, como animar el fondo de nuestra p\u00e1gina web y como animar texto en CSS con degradado.<\/p>\n

 <\/p>\n

Implementar degradados en CSS<\/h2>\n

Para implementar un degradado, tenemos entonces que utilizar la propiedad background-image. Y su valor, puede ser linear-gradient o radial-gradient.<\/p>\n

Sus sintaxis son las siguientes:<\/p>\n

background-image: linear-gradient(direcci\u00f3n,&nbsp;color-stop1,&nbsp;color-stop2, ...);\r\n\r\nbackground-image: radial-gradient(tama\u00f1o de la forma en la posici\u00f3n, primer-color, ..., ultimo-color);<\/pre>\n
Utilizaremos el valor de linear-gradient para los ejemplos de este articulo y veremos como podemos animar con CSS esos degradados.<\/p>\n
background: linear-gradient(to right, #000000, #00ff00, #207cca, #0000ff, #e60073, #ff0000, #ffffff);<\/pre>\n
\"generador<\/a><\/p>\n
*El valor de la direcci\u00f3n puede ser to right, to left o en grados.<\/em><\/p>\n
1-Animar botones en CSS<\/h3>\n
Para animar el fondo de un bot\u00f3n\u00a0 y crear un efecto de cambio de colores vamos a poner un background-image a un elemento button html con un linear-gradient con direcci\u00f3n to right y varios valores de colores:<\/p>\n
<div class=\"box\">\r\n  <h1 class=\"title\">Degradados animados<\/h1>\r\n  <button class=\"anim\">Animate!<\/button>\r\n<\/div><\/pre>\n
*{\r\n  box-sizing: border-box;\r\n}\r\nbody{\r\n  font-family: sans-serif;\r\n  color: #222;\r\n}\r\nh1{\r\n  font-size: 4rem;\r\n}\r\n.anim{\r\n  font-size: 2rem;\r\n  border: 0;\r\n  padding: 30px 70px;\r\n  background-image: linear-gradient(to right, \r\n    #fdb94e,\r\n    #f9a852,\r\n    #f69653,\r\n    #f38654,\r\n    #f07654,\r\n    #ed6856,\r\n    #ef5956,\r\n    #ee4c58\r\n  );\r\n}<\/pre>\n
\"botones<\/a>Ahora podr\u00edamos con una pseudo-clase :hover, cambiar el degradado cuando pasamos el rat\u00f3n encima del bot\u00f3n pero el resultado ser\u00eda un cambio brusco.<\/p>\n
Bacground-image es una de las pocas propiedades a las cuales no se puede aplicar transici\u00f3n.<\/p>\n
Tenemos otro recurso que nos va a permitir animar este degradado, es el background-position<\/strong> porque es una propiedad a la cual podemos aplicar una transici\u00f3n.<\/p>\n
As\u00ed que al ejemplo anterior, le vamos primero a aplicar la propiedad de background-size<\/strong> para agrandar el background y de esa manera \u00abesconder\u00bb unos colores.<\/p>\n
Como se puede ver si juego con el background position, obtengo efectos distintos:<\/p>\n
\"bacground-position\"background-position<\/div>\n
 <\/p>\n
Entonces ahora, voy a aplicar ese background-position, a la pseudo-clase hover:<\/p>\n
.anim{\r\n  color: #fff;\r\n  cursor: pointer;\r\n  font-size: 2rem;\r\n  border: 0;\r\n  padding: 30px 70px;\r\n  background-image: linear-gradient(to right, #e80033, #f9a852, #f69653, #f38654, #f07654, #ed6856, #ef5956, #ee4c58, #56c1ab);\r\n  background-size: 700%;\r\n  transition: background-position 1s;\r\n}\r\n.anim:hover{\r\n   background-position: 50%;\r\n   \/*background-position: right;*\/\r\n}<\/pre>\n
El resultado ser\u00e1 un efecto suave de cambio de fondo con degradado.<\/p>\n
 <\/p>\n
2-Animar backgrounds degradados CSS<\/h3>\n
Esta vez, vamos a crear una animaci\u00f3n para el fondo del elemento body de mi documento html. Como para el boton, pondremos un backgroung-size m\u00e1s grande para poder animar la posici\u00f3n del fondo.<\/p>\n
La animaci\u00f3n se crea con unos keyframes y como entre los valores es importante poner la propiedad animation-direction<\/strong> con el valor alternate. Es para evitar que la animaci\u00f3n vuelva a su punto de partida. El valor alternate, hace que va en un sentido y luego en el otro:<\/p>\n
:root{\r\n  --gradient:  linear-gradient(to right, #e80033, #f9a852, #f69653, #f38654, #f07654, #ed6856, #ef5956, #ee4c58, #56c1ab);\r\n}\r\n*{\r\n  box-sizing: border-box;\r\n}\r\nbody{\r\n  font-family: sans-serif;\r\n  color: #222;\r\n  background: beige;\r\n  background-image: var(--gradient);\r\n  background-size: 400%;\r\n  animation: fondo-anim 20s infinite alternate;\r\n}\r\n@keyframes fondo-anim{\r\n  0%{background-position: left;} \/*por defecto*\/\r\n  100%{background-position: right;}\r\n}<\/pre>\n
\"fondo<\/a><\/p>\n
Es un recurso que no aplicar\u00eda a todas las p\u00e1ginas web pero si conseguimos una buena paleta de colores y que el efecto tienen un ritmo correcto puede ser algo muy chulo!<\/p>\n
Mi consejo es que la animaci\u00f3n no vaya demasiado r\u00e1pido para no molestar a los ojos del usuario, en el ejemplo el tiempo de la animaci\u00f3n es de 20 segundos.<\/p>\n
 <\/p>\n
3-Animar texto con CSS<\/h3>\n
Vamos ahora a poner un background a un texto. Es algo que no todo el mundo sabe pero se puede poner un degradado al texto.<\/p>\n
Pero si pongo un background-image a un texto pasa lo siguiente:\"degradado<\/a><\/p>\n
El degradado se aplica a la caja del texto pero no a las letras.<\/p>\n
Existe una propiedad de CSS background-clip<\/a>,\u00a0que especifica cu\u00e1nto debe extenderse el fondo dentro de un elemento. Se puede aplicar a\u00a0border-box, padding-box, content-box y a un texto.\u00a0 De esa manera, el background esta fijado al texto. Todavia no se puede ver, ya que el texto lo bloquea.<\/p>\n
Hay una soluci\u00f3n f\u00e1cil para resolver eso, es aplicar la propiedad color con un valor transparent al texto:<\/p>\n
h1{\r\n  font-size: 6rem;\r\n  color: #fff;\r\n  margin: 0 0 0.5em;\r\n  text-transform: uppercase;\r\n  font-size: 6rem;\r\n  color: #ee6352;\r\n  line-height: 1.2;\r\n  background-image: var(--gradient);\r\n  -webkit-background-clip: text;\r\n  color: transparent;\r\n  background-size: 400%;\r\n  animation: fondo-anim 5s infinite alternate;\r\n}<\/pre>\n
Y como lo hicimos para el fondo del elemento body, le podemos a\u00f1adir una animaci\u00f3n.<\/p>\n
\"degradados<\/a><\/p>\n
 <\/p>\n
Como hab\u00e9is visto, es muy f\u00e1cil implementar esos tipos de efectos o de animaci\u00f3nes en nuestros proyectos web. Adem\u00e1s existen herramientas como generadores online de degradados<\/a> que nos simplifican a\u00fan mas la tarea!<\/p>\n
Pod\u00e9is encontrar todo el c\u00f3digo de como animar backgrounds degradados en CSS en mi cuenta de codepen:\u00a0@steph_itw<\/a>\u00a0y no dud\u00e9is en dejar un comentario si quer\u00e9is m\u00e1s informaci\u00f3n sobre el tema.<\/p>\n","protected":false},"excerpt":{"rendered":"
En este articulo, aprenderemos como animar backgrounds degradados en CSS. Los degradados son considerados como im\u00e1genes de fondo.<\/p>\n","protected":false},"author":33,"featured_media":11109,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-10984","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nComo animar backgrounds degradados en CSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como animar backgrounds degradados en CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-04T12:04:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-23T10:36:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"Como animar backgrounds degradados en CSS\",\"datePublished\":\"2020-12-04T12:04:17+00:00\",\"dateModified\":\"2020-12-23T10:36:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\"},\"wordCount\":709,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\",\"name\":\"Como animar backgrounds degradados en CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png\",\"datePublished\":\"2020-12-04T12:04:17+00:00\",\"dateModified\":\"2020-12-23T10:36:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png\",\"width\":1000,\"height\":500,\"caption\":\"como animar background css\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como animar backgrounds degradados en CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como animar backgrounds degradados en CSS - Blog Escola Espai","description":"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.","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:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/","og_locale":"es_ES","og_type":"article","og_title":"Como animar backgrounds degradados en CSS - Blog Escola Espai","og_description":"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.","og_url":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2020-12-04T12:04:17+00:00","article_modified_time":"2020-12-23T10:36:45+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","type":"image\/png"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"Como animar backgrounds degradados en CSS","datePublished":"2020-12-04T12:04:17+00:00","dateModified":"2020-12-23T10:36:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/"},"wordCount":709,"commentCount":1,"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/","url":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/","name":"Como animar backgrounds degradados en CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","datePublished":"2020-12-04T12:04:17+00:00","dateModified":"2020-12-23T10:36:45+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"Como animar backgrounds degradados en CSS tanto para texto como para fondos y botones. Descubre las propiedades CSS para crear degradados animados.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","width":1000,"height":500,"caption":"como animar background css"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2020\/12\/como-animar-backgrounds-degradados-en-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Como animar backgrounds degradados en CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/12\/como-animar-background-css.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=10984"}],"version-history":[{"count":36,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10984\/revisions"}],"predecessor-version":[{"id":11119,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/10984\/revisions\/11119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/11109"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=10984"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=10984"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=10984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}