{"id":15518,"date":"2025-02-11T18:28:46","date_gmt":"2025-02-11T16:28:46","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=15518"},"modified":"2025-02-11T21:14:27","modified_gmt":"2025-02-11T19:14:27","slug":"animar-variables-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/","title":{"rendered":"Animar Variables CSS"},"content":{"rendered":"<p>En los \u00faltimos a\u00f1os, se han introducido algunas mejoras en las <a href=\"https:\/\/www.espai.es\/blog\/2022\/04\/variables-css\/\">variables CSS<\/a> (ahora tambi\u00e9n conocidas como propiedades personalizadas [<strong>custom properties<\/strong>]) que permiten que podamos animar su valor.<\/p>\n<h2>Declarar una variable CSS<\/h2>\n<p>Para poder animar una variable CSS, lo primero que tenemos que hacer es cambiar la forma de declarar dicha variable. Como ya vimos en su momento, <strong>una propiedad CSS se puede declarar con la sintaxis de los dos guiones<\/strong>:<\/p>\n<pre>header {\r\n  --un-color : blue;\r\n  --otro-color : white;\r\n}\r\n<\/pre>\n<p>Sin embargo, actualmente tenemos otra forma alternativa de declararlas mediante <strong>la regla @property<\/strong> (que es obligatoria si queremos poder animarlas). Esta nueva forma nos permite adem\u00e1s indicar aspectos como si la propiedad se hereda o no:<\/p>\n<pre>@property --mi-variable {\r\n  syntax: \"&lt;color&gt;\";\r\n  inherits: false;\r\n  initial-value: #ff0000;\r\n}\r\n<\/pre>\n<p>En este ejemplo, estamos creando una nueva variable CSS llamada <strong>&#8211;mi-variable<\/strong>, que acepta valores de tipo \u00abcolor\u00bb, que no es heredable, y que tiene un color rojo como valor por defecto.<\/p>\n<p>Tal y como se puede observar, en \u00ab<strong>syntax<\/strong>\u00bb indicamos el tipo de dato que aceptar\u00e1 la variable. Tienes una lista de los tipos de dato soportado en el siguiente <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@property\/syntax\">enlace<\/a>. En \u00ab<strong>inherits<\/strong>\u00bb indicamos si el valor de la propiedad la heredan los hijos, y en \u00ab<strong>initial-value<\/strong>\u00bb indicamos un valor inicial.<\/p>\n<p><em>NOTA: si usamos la vieja sintaxis, el valor de la propiedad siempre se hereda.<\/em><\/p>\n<p>Aunque esta forma de declarar variables ya tiene algunos a\u00f1os, Firefox no ofrec\u00eda soporte hasta verano del a\u00f1o pasado (2024). Y es ahora que empieza a estar bastante bien soportada cuando nos podemos plantear la posibilidad de empezar a usarla (aunque yo recomendar\u00eda esperar todav\u00eda un poco; entre 6 meses y un a\u00f1o).<\/p>\n<h2>Animar una propiedad CSS personalizada<\/h2>\n<p>Si las declaramos con esta nueva sintaxis que hemos visto, ya es posible animar una propiedad CSS personalizada (variable CSS) igual que cualquier otra propiedad CSS, la \u00fanica cosa que tenemos que tener en cuenta es usar el m\u00e9todo <strong>var()<\/strong> para acceder al valor de nuestra propiedad CSS personalizada.<\/p>\n<p>Hay que recordar que una de las ventajas de las variables CSS es poder almacenar un valor que podemos utilizar en diferentes partes de nuestro CSS. Por lo que si queremos animar una variable CSS lo suyo es que la podamos utilizar en diferentes partes de nuestro CSS.<\/p>\n<p>Una practica habitual cuando se quieren realizar animaciones, es disponer de una variable con un valor que vaya de 0 al 1, indicando 0 el inicio de la animaci\u00f3n y 1 el final de la animaci\u00f3n. Veamos un ejemplo de como animar una variable CSS de este tipo, y como usar dicho valor de 0 a 1 para convertirlo despu\u00e9s a otros valores seg\u00fan sea necesario:<\/p>\n<pre>#container {\r\n  margin: 100px auto;\r\n  width: 300px;\r\n}\r\n\r\n@property --mi-propiedad {\r\n  syntax: \"\";\r\n  inherits: false;\r\n  initial-value: 0;\r\n}\r\n\r\n@keyframes mi-animacion {\r\n  from { --mi-propiedad: 0 }\r\n  to { --mi-propiedad: 1 }\r\n}\r\n\r\np {  \r\n  --mi-propiedad: 0;\r\n  color: color-mix(in hsl, red, blue calc(var(--mi-propiedad) * 100%));\r\n  text-align: center;\r\n  transform: translateY(calc(sin(var(--mi-propiedad) * 3.1416 * 2) * 50px))\r\n             rotateZ(calc(var(--mi-propiedad) * 360deg));\r\n  animation: mi-animacion linear 10s infinite; \r\n}\r\n<\/pre>\n<p>Puedes probar el anterior CSS con el siguiente c\u00f3digo HTML:<\/p>\n<pre>&lt;div id=\"container\"&gt;\r\n  &lt;p&gt;\u00a1Variables CSS!&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>En este ejemplo, estamos usando la variable CSS <strong>&#8211;mi-propiedad<\/strong>, cuyo valor va de 0 a 1 durante la animaci\u00f3n, para interpolar el color del texto con la funci\u00f3n <strong>color-mix()<\/strong>, para calcular la rotaci\u00f3n del texto con <strong>rotateZ()<\/strong>, y para calcular la posici\u00f3n vertical con <strong>translateY()<\/strong>.<\/p>\n<p>En el caso de <strong>color-mix()<\/strong> multiplicamos nuestra variable por 100% para calcular el % de interpolaci\u00f3n entre los dos colores indicados en la funci\u00f3n (red y blue). En <strong>rotateZ()<\/strong> multiplicamos por 360 grados para calcular la rotaci\u00f3n. Y en <strong>translateY()<\/strong> interpolamos el seno desde 0 hasta 2*PI radianes para calcular una posici\u00f3n vertical que vaya variando de forma <a href=\"https:\/\/es.wikipedia.org\/wiki\/Sinusoide\">sinusoide<\/a> con una amplitud de 50px.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>Esta nueva capacidad de la variables CSS para ser animadas, junto a nuevas funciones como <strong>color-mix()<\/strong>, <strong>sin()<\/strong>, etc&#8230; nos abren la posibilidad de realizar animaciones de forma m\u00e1s avanzada y vers\u00e1til, haciendo cada vez m\u00e1s innecesario el uso de JavaScript para realizar ciertos efectos.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En los \u00faltimos a\u00f1os, se han introducido algunas mejoras en las variables CSS (ahora tambi\u00e9n conocidas como propiedades personalizadas [custom properties]) que permiten que podamos animar su valor. Declarar una variable CSS Para poder animar una variable CSS, lo primero que tenemos que hacer es&#8230;<\/p>\n","protected":false},"author":23,"featured_media":15524,"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":[12],"class_list":["post-15518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Animar Variables CSS - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones 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:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animar Variables CSS - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-11T16:28:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-11T19:14:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg\" \/>\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\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\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\/2025\/02\/animar-variables-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Animar Variables CSS\",\"datePublished\":\"2025-02-11T16:28:46+00:00\",\"dateModified\":\"2025-02-11T19:14:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\"},\"wordCount\":603,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\",\"name\":\"Animar Variables CSS - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg\",\"datePublished\":\"2025-02-11T16:28:46+00:00\",\"dateModified\":\"2025-02-11T19:14:27+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg\",\"width\":1000,\"height\":500,\"caption\":\"Animar Variables CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animar Variables 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\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animar Variables CSS - Blog Escola Espai","description":"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones 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:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/","og_locale":"es_ES","og_type":"article","og_title":"Animar Variables CSS - Blog Escola Espai","og_description":"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones CSS.","og_url":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2025-02-11T16:28:46+00:00","article_modified_time":"2025-02-11T19:14:27+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Animar Variables CSS","datePublished":"2025-02-11T16:28:46+00:00","dateModified":"2025-02-11T19:14:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/"},"wordCount":603,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","keywords":["CSS"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/","url":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/","name":"Animar Variables CSS - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","datePublished":"2025-02-11T16:28:46+00:00","dateModified":"2025-02-11T19:14:27+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo aprenderemos a animar las variables de CSS gracias a la nueva regla @property y al uso de nuevas funciones CSS.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","width":1000,"height":500,"caption":"Animar Variables CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2025\/02\/animar-variables-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Animar Variables 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\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2025\/02\/logo.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15518","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\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=15518"}],"version-history":[{"count":5,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15518\/revisions"}],"predecessor-version":[{"id":15520,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/15518\/revisions\/15520"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/15524"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=15518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=15518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=15518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}