{"id":10491,"date":"2026-07-23T08:44:39","date_gmt":"2026-07-23T13:44:39","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10491"},"modified":"2026-07-23T08:44:40","modified_gmt":"2026-07-23T13:44:40","slug":"using-animation-composition-in-css-to-avoid-redeclaring-other-values","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/using-animation-composition-in-css-to-avoid-redeclaring-other-values\/","title":{"rendered":"Using `animation-composition` in CSS to Avoid Redeclaring Other Values"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If we use <em>multiple<\/em> <code>@keyframes<\/code> animate on an element where we&#8217;re changing the <code>transform<\/code> property, the latter will always <em>completely wipe out<\/em> the former declarations. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f8aed-8fb1-7cd9-b27b-ec06443c334c\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f8aed-8fb1-7cd9-b27b-ec06443c334c?height=400&amp;theme-id=1&amp;slug-hash=019f8aed-8fb1-7cd9-b27b-ec06443c334c&amp;default-tab=css,result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f8aed-8fb1-7cd9-b27b-ec06443c334c\" title=\"CodePen Embed 019f8aed-8fb1-7cd9-b27b-ec06443c334c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">With CSS&#8217; <code>animation-composition<\/code> property, however, the <code>transform<\/code>s in the animations can be <em>combined.<\/em> (Although, for fun, try removing the <code>from<\/code> declarations in the <code>@keyframes<\/code>, it gets weird.)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As an example of proper combining, we can move an element leftward with <code>translate()<\/code> in a keyframe, then downward with another while <code>animation-composition<\/code> preserves the previous leftward displacement.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f8afc-ca99-70dd-bfc5-c2b131c30e2e\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f8afc-ca99-70dd-bfc5-c2b131c30e2e?height=400&amp;theme-id=1&amp;slug-hash=019f8afc-ca99-70dd-bfc5-c2b131c30e2e&amp;default-tab=css,result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f8afc-ca99-70dd-bfc5-c2b131c30e2e\" title=\"CodePen Embed 019f8afc-ca99-70dd-bfc5-c2b131c30e2e\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s invaluable for sequential transformations, but <code>animation-composition<\/code> can be just as useful even when there\u2019s nothing to \u201ctransform\u201d.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">What this property does is quite special: <strong>it adds to the value of an established property-value pair.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Say there are initially multiple <code>box-shadow<\/code>s on an element and later we have to add another shadow as the user interacts with it. How is that usually done?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We set <em>all<\/em> the shadows \u2014 the initial ones and the new one \u2014 at the user interaction. For flexibility, we might store the values for the initial rings in a variable and use it in both the initial and interaction styles.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* The classic way *\/<\/span>\n<span class=\"hljs-selector-class\">.el<\/span> {\n  <span class=\"hljs-attribute\">--initial-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> black;\n\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-built_in\">var<\/span>(--initial-shadow);\n\n  &amp;:hover {\n    <span class=\"hljs-comment\">\/* tack on an extra shadow *\/<\/span>\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-built_in\">var<\/span>(--initital-shadow), <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">10px<\/span> black;\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Although variables make things easier, what if <strong>we don\u2019t have to redeclare<\/strong> the initial shadow at all on user interaction, via variables or directly, and declare only the new ring and let the browser add it outside the ones already there?<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That would save us from rewriting values or from using variables, which can make it harder to scan stylesheets visually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The <code>animation-composition<\/code> property can help with that. Here&#8217;s a basic example with two shadow declarations (one added via @keyframes), and you can see how they <strong>both<\/strong> apply on hover.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f8b55-9dfc-7d13-9b45-eeea729c0d94\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f8b55-9dfc-7d13-9b45-eeea729c0d94?height=450&amp;theme-id=1&amp;slug-hash=019f8b55-9dfc-7d13-9b45-eeea729c0d94&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f8b55-9dfc-7d13-9b45-eeea729c0d94\" title=\"CodePen Embed 019f8b55-9dfc-7d13-9b45-eeea729c0d94\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s another example below, where if you click the &#8220;Posion Type Only&#8221; button, you can see an additional <code>box-shadow<\/code> be applied.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f7b40-7834-7f6b-9088-ee5e9be4b16d\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f7b40-7834-7f6b-9088-ee5e9be4b16d?height=650&amp;theme-id=1&amp;slug-hash=019f7b40-7834-7f6b-9088-ee5e9be4b16d&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f7b40-7834-7f6b-9088-ee5e9be4b16d\" title=\"CodePen Embed 019f7b40-7834-7f6b-9088-ee5e9be4b16d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The set of Pok\u00e9mon images is laid out in a grid. Each has an inward shadow in different colors.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.pokemon<\/span> {\n  <span class=\"hljs-comment\">\/* ivysaur *\/<\/span>\n  &amp;:nth-child(1) {\n    <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'ivysaur.png'<\/span>);\n    <span class=\"hljs-comment\">\/* teal shadow *\/<\/span>\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">100<\/span> <span class=\"hljs-number\">147<\/span> <span class=\"hljs-number\">165<\/span>) inset;\n  }\n  <span class=\"hljs-comment\">\/* chikorita *\/<\/span>\n  &amp;<span class=\"hljs-selector-pseudo\">:nth-child(2)<\/span> {\n    <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'chikorita.png'<\/span>);\n    <span class=\"hljs-comment\">\/* green shadow *\/<\/span>\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">113<\/span> <span class=\"hljs-number\">154<\/span> <span class=\"hljs-number\">107<\/span>) inset;\n  }\n  <span class=\"hljs-comment\">\/* vileplume *\/<\/span>\n  &amp;<span class=\"hljs-selector-pseudo\">:nth-child(3)<\/span> {\n    <span class=\"hljs-attribute\">background-image<\/span>: <span class=\"hljs-built_in\">url<\/span>(<span class=\"hljs-string\">'vileplume.png'<\/span>);\n    <span class=\"hljs-comment\">\/* pink shadow *\/<\/span>\n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">6px<\/span> <span class=\"hljs-number\">1px<\/span> <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">193<\/span> <span class=\"hljs-number\">133<\/span> <span class=\"hljs-number\">140<\/span>) inset;\n  }\n  <span class=\"hljs-comment\">\/* more *\/<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f7b44-35eb-70ab-ae3c-5d4ec9655e17\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f7b44-35eb-70ab-ae3c-5d4ec9655e17?height=450&amp;theme-id=1&amp;slug-hash=019f7b44-35eb-70ab-ae3c-5d4ec9655e17&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f7b44-35eb-70ab-ae3c-5d4ec9655e17\" title=\"CodePen Embed 019f7b44-35eb-70ab-ae3c-5d4ec9655e17\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Now, time to set up a user interaction scenario. When a checkbox is checked to show the poison-type Pok\u00e9mon, those Pok\u00e9mon get two rings in the form of an inward and outward shadow.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- the poisonous pokemons have data-type=\"poisonous\" --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"pokemon\"<\/span> <span class=\"hljs-attr\">data-type<\/span>=<span class=\"hljs-string\">\"poisonous\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- a checkbox to accent the poisonous pokemons --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"isPoisonous\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"isPoisonous\"<\/span>&gt;<\/span>Poison Type Only<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n\n\/* when the checkbox is checked *\/\nbody:has(#isPoisonous:checked) .pokemon&#91;data-type=\"poisonous\"] {\n  \/* add two rings *\/\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s declare those extra rings in a keyframe.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-keyword\">@keyframes<\/span> focus-rings {\n  <span class=\"hljs-selector-tag\">to<\/span> { \n    <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">7px<\/span> white, <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">8px<\/span> grey, inset <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">2px<\/span> <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">241<\/span>, <span class=\"hljs-number\">52<\/span>, <span class=\"hljs-number\">90<\/span>);\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">This keyframe is then applied to the selected pokemons when the checkbox is checked, with <code>animation-composition: add;<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">body<\/span><span class=\"hljs-selector-pseudo\">:has(<\/span><span class=\"hljs-selector-id\">#isPoisonous<\/span><span class=\"hljs-selector-pseudo\">:checked)<\/span> <span class=\"hljs-selector-class\">.pokemon<\/span><span class=\"hljs-selector-attr\">&#91;data-type=<span class=\"hljs-string\">\"poisonous\"<\/span>]<\/span> {\n  <span class=\"hljs-attribute\">animation<\/span>: focus-rings <span class=\"hljs-number\">0.3s<\/span> forwards;\n  <span class=\"hljs-attribute\">animation-composition<\/span>: add;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">When we use <code>add<\/code> for <code>animation-composition<\/code>, the browser strings together the animated property\u2019s initial and newly introduced values. <strong>It layers them<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In our example, the shadows declared in the keyframe are now chained to the shadow that already exists.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The result once again:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f7b40-7834-7f6b-9088-ee5e9be4b16d\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f7b40-7834-7f6b-9088-ee5e9be4b16d?height=550&amp;theme-id=1&amp;slug-hash=019f7b40-7834-7f6b-9088-ee5e9be4b16d&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f7b40-7834-7f6b-9088-ee5e9be4b16d\" title=\"CodePen Embed 019f7b40-7834-7f6b-9088-ee5e9be4b16d\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">For animation, we can <strong>string up values of most list-valued CSS properties<\/strong> like <code>filter<\/code>, <code>text-shadow<\/code>, and so forth.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can also make use of <code>animation-composition<\/code>\u2019s <code>accumulate<\/code> value. Unlike <code>add<\/code> that layers a property\u2019s values, <code>accumulate<\/code> <strong>compounds the values<\/strong> using a relevant arithmetic.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For instance, the <code>aspect-ratio<\/code> values multiply when <code>animation-composition<\/code> is set:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.box-1<\/span> { \n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">0.5<\/span>; \n}\n<span class=\"hljs-selector-class\">.box-2<\/span> {\n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">1<\/span>; \n}\n<span class=\"hljs-selector-class\">.box-3<\/span> { \n  <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">2<\/span>; \n}\n<span class=\"hljs-selector-pseudo\">:nth-child(2<\/span> <span class=\"hljs-selector-tag\">of<\/span> <span class=\"hljs-selector-class\">.box-1<\/span>),\n<span class=\"hljs-selector-pseudo\">:nth-child(2<\/span> <span class=\"hljs-selector-tag\">of<\/span> <span class=\"hljs-selector-class\">.box-2<\/span>),\n<span class=\"hljs-selector-pseudo\">:nth-child(2<\/span> <span class=\"hljs-selector-tag\">of<\/span> <span class=\"hljs-selector-class\">.box-3<\/span>){\n  <span class=\"hljs-attribute\">animation<\/span>: apply-ratio forwards ;\n  <span class=\"hljs-attribute\">animation-composition<\/span>: accumulate;\n  <span class=\"hljs-comment\">\/* if we apply `add` here that acts as accumulate *\/<\/span>\n}\n<span class=\"hljs-keyword\">@keyframes<\/span> apply-ratio {\n  <span class=\"hljs-selector-tag\">to<\/span> { \n   <span class=\"hljs-comment\">\/* halves the already set ratio of each box *\/<\/span>\n    <span class=\"hljs-attribute\">aspect-ratio<\/span>: <span class=\"hljs-number\">0.5<\/span>; \n  }\n}\n\n<span class=\"hljs-comment\">\/*\n<span class=\"hljs-doctag\">Note:<\/span> July 2026 - A possible bug in Firefox prevents the ratio compounding\n*\/<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_019f7b36-f478-7ea2-9ac3-45872b990611\" src=\"\/\/codepen.io\/editor\/anon\/embed\/019f7b36-f478-7ea2-9ac3-45872b990611?height=650&amp;theme-id=1&amp;slug-hash=019f7b36-f478-7ea2-9ac3-45872b990611&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 019f7b36-f478-7ea2-9ac3-45872b990611\" title=\"CodePen Embed 019f7b36-f478-7ea2-9ac3-45872b990611\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">If you\u2019re already using animation, transition, or keyframes, and need to redeclare values for them, consider using <code>animation<\/code> with <code>animation-composition<\/code>. This eliminates the need to redeclare values or set up variables for reusability. <code>animation-composition<\/code> allows us to <strong>declare only what needs to be added<\/strong>, and the browser will handle the layering based on the existing values.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s an example. You can list multiple comma-separated box-shadows, but if you apply a *new* box-shadow, it overrides anything set before. Not true here.<\/p>\n","protected":false},"author":20,"featured_media":10496,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[520,369,220,7],"class_list":["post-10491","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-post","tag-keyframes","tag-animation-composition","tag-box-shadow","tag-css"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/master.dev\/blog\/wp-content\/uploads\/2026\/07\/mult-shadows.jpg?fit=2000%2C1200&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10491","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/comments?post=10491"}],"version-history":[{"count":6,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10491\/revisions"}],"predecessor-version":[{"id":10500,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/posts\/10491\/revisions\/10500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media\/10496"}],"wp:attachment":[{"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/media?parent=10491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/categories?post=10491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/master.dev\/blog\/wp-json\/wp\/v2\/tags?post=10491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}