[{"data":1,"prerenderedAt":1667},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations":3,"content-all-pages":1404},{"id":4,"title":5,"body":6,"description":1386,"extension":1387,"meta":1388,"navigation":344,"path":1400,"seo":1401,"stem":1402,"__hash__":1403},"content\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations\u002Findex.md","@starting-style: Animating an Element's Very First Style Change",{"type":7,"value":8,"toc":1376},"minimark",[9,13,40,43,46,51,63,90,92,96,102,247,249,253,263,267,400,862,895,897,901,906,930,933,963,966,1026,1029,1031,1035,1044,1257,1272,1274,1278,1297,1299,1303,1309,1315,1324,1330,1332,1336,1372],[10,11,5],"h1",{"id":12},"starting-style-animating-an-elements-very-first-style-change",[14,15,16,17,21,22,25,26,31,32,35,36,39],"p",{},"Add an element to the DOM with ",[18,19,20],"code",{},"opacity: 1"," and a transition on ",[18,23,24],{},"opacity",", and it will appear at full opacity with no fade — every time. The transition is syntactically perfect and the browser ignores it. This behaviour is not a bug and it is not a race condition you can fix by deferring the insertion; it falls out of how the transition algorithm is specified. This page, part of the ",[27,28,30],"a",{"href":29},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002F","CSS Transition Fundamentals"," section, explains the before-change style rule that causes it and shows how the ",[18,33,34],{},"@starting-style"," at-rule supplies the missing frame so entry motion works for newly inserted nodes, elements leaving ",[18,37,38],{},"display: none",", and anything promoted into the top layer.",[14,41,42],{},"The narrow scenario: a toast, dropdown, or freshly appended list item that must ease in on the first frame it exists, without a script forcing a reflow between two class changes.",[44,45],"hr",{},[47,48,50],"h2",{"id":49},"why-the-browser-refuses-to-animate-and-when-to-accept-it","Why the browser refuses to animate, and when to accept it",[14,52,53,54,58,59,62],{},"A CSS transition is defined as an interpolation between a ",[55,56,57],"strong",{},"before-change style"," and an ",[55,60,61],{},"after-change style",". The engine computes both, diffs them property by property, and starts an animation for each transitionable property whose value differs. An element rendered for the first time has no before-change style at all: there is no earlier computed style in the box tree to diff against. With only one style available, nothing differs, so no transition is created and the element paints at its final value.",[14,64,65,66,69,70,73,74,76,77,81,82,86,87,89],{},"The historic workaround was to insert the element in its hidden state, read a layout property such as ",[18,67,68],{},"offsetHeight"," to force a style recalculation, and only then add the visible class — two style resolutions manufactured by JavaScript so the diff has something to compare. That trick is fragile: it depends on a synchronous reflow that a framework's batching or a ",[18,71,72],{},"requestAnimationFrame"," scheduler can easily reorder, and it costs a forced synchronous layout on every insertion. ",[18,75,34],{}," replaces the whole dance with a declarative rule that tells the engine, in CSS, what the before-change style ",[78,79,80],"em",{},"should have been",". There is no accessibility tradeoff to the mechanism itself, but the motion it enables is still motion, so it belongs under the same ",[27,83,85],{"href":84},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","reduced motion preferences"," guard as everything else. Skip ",[18,88,34],{}," when the element's arrival is not something the user needs to perceive — an instant appearance is cheaper and often calmer.",[44,91],{},[47,93,95],{"id":94},"where-the-before-change-style-comes-from","Where the before-change style comes from",[14,97,98,99,101],{},"The diagram contrasts the two resolution paths. Without a starting rule the engine finds no earlier style and commits directly to the final one. With ",[18,100,34],{}," it has a synthetic previous style to diff against, so ordinary transition machinery takes over.",[103,104,110,111,110,115,110,119,110,126,110,132,110,143,110,149,110,154,110,162,110,165,110,169,110,172,110,176,110,179,110,183,110,186,110,190,110,195,110,199,110,204,110,207,110,209,110,211,110,214,110,216,110,219,110,222,110,225,110,230],"svg",{"viewBox":105,"role":106,"ariaLabel":107,"xmlns":108,"style":109},"0 0 720 360","img","Comparison of first-render style resolution with and without a starting-style rule","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[112,113,114],"title",{},"Before-change style resolution on first render",[116,117,118],"desc",{},"Two tracks showing that without a starting rule the browser has no previous style and paints the final value, while a starting rule supplies one so a transition is created.",[120,121,125],"text",{"x":122,"y":123,"style":124},"360","30","text-anchor:middle;fill:currentColor;font:700 18px sans-serif","Resolving the before-change style",[120,127,131],{"x":128,"y":129,"style":130},"24","74","text-anchor:start;fill:currentColor;font:600 13px sans-serif;opacity:0.85","WITHOUT a starting rule",[133,134],"rect",{"x":128,"y":135,"width":136,"height":137,"rx":138,"fill":139,"stroke":140,"strokeWidth":141,"opacity":142},"86","188","56","8","none","currentColor","1.5","0.5",[120,144,148],{"x":145,"y":146,"style":147},"118","112","text-anchor:middle;fill:currentColor;font:12px sans-serif","element rendered",[120,150,153],{"x":145,"y":151,"style":152},"130","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.7","first frame",[155,156],"line",{"x1":157,"y1":158,"x2":159,"y2":158,"stroke":140,"strokeWidth":160,"markerEnd":161},"212","114","248","2","url(#sse-arr)",[133,163],{"x":164,"y":135,"width":136,"height":137,"rx":138,"fill":139,"stroke":140,"strokeWidth":141,"opacity":142},"256",[120,166,168],{"x":167,"y":146,"style":147},"350","no earlier style",[120,170,171],{"x":167,"y":151,"style":152},"nothing to diff",[155,173],{"x1":174,"y1":158,"x2":175,"y2":158,"stroke":140,"strokeWidth":160,"markerEnd":161},"444","480",[133,177],{"x":178,"y":135,"width":136,"height":137,"rx":138,"fill":139,"stroke":140,"strokeWidth":141,"opacity":142},"488",[120,180,182],{"x":181,"y":146,"style":147},"582","paints final value",[120,184,185],{"x":181,"y":151,"style":152},"no transition",[120,187,189],{"x":128,"y":157,"style":188},"text-anchor:start;fill:#7aa2ff;font:600 13px sans-serif","WITH a starting rule",[133,191],{"x":128,"y":192,"width":136,"height":137,"rx":138,"fill":193,"opacity":194},"224","#7aa2ff","0.18",[120,196,34],{"x":145,"y":197,"style":198},"250","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[120,200,203],{"x":145,"y":201,"style":202},"268","text-anchor:middle;fill:currentColor;font:11px sans-serif;opacity:0.75","declared in CSS",[155,205],{"x1":157,"y1":206,"x2":159,"y2":206,"stroke":193,"strokeWidth":160,"markerEnd":161},"252",[133,208],{"x":164,"y":192,"width":136,"height":137,"rx":138,"fill":193,"opacity":194},[120,210,57],{"x":167,"y":197,"style":147},[120,212,213],{"x":167,"y":201,"style":202},"now exists",[155,215],{"x1":174,"y1":206,"x2":175,"y2":206,"stroke":193,"strokeWidth":160,"markerEnd":161},[133,217],{"x":178,"y":192,"width":136,"height":137,"rx":138,"fill":193,"opacity":218},"0.3",[120,220,221],{"x":181,"y":197,"style":147},"transition starts",[120,223,224],{"x":181,"y":201,"style":202},"interpolates in",[120,226,229],{"x":122,"y":227,"style":228},"326","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.8","The starting rule is used for one frame only, then discarded.",[231,232,233,234,110],"defs",{},"\n    ",[235,236,242,243,233],"marker",{"id":237,"markerWidth":238,"markerHeight":238,"refX":239,"refY":240,"orient":241},"sse-arr","9","7","4","auto","\n      ",[244,245],"path",{"d":246,"fill":140},"M0 0 L8 4 L0 8 z",[44,248],{},[47,250,252],{"id":251},"a-complete-working-implementation","A complete working implementation",[14,254,255,256,258,259,262],{},"The demo below reveals a panel with a checkbox, which is enough to exercise both halves of the lifecycle: opening the panel is a first style change (it was ",[18,257,38],{},", so it has no before-change style), and closing it is an ordinary transition toward a discrete ",[18,260,261],{},"display"," value. Toggle it a few times and watch that the entry motion repeats every time, not just once.",[264,265],"live-demo",{"name":266},"tk-starting-style-panel",[268,269,274],"pre",{"className":270,"code":271,"language":272,"meta":273,"style":273},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003Clabel class=\"reveal__label\">\n  \u003Cinput type=\"checkbox\" class=\"reveal__input\"> Show notification\n\u003C\u002Flabel>\n\n\u003Cdiv class=\"reveal__panel\">\n  \u003Cstrong>Saved\u003C\u002Fstrong>\n  \u003Cspan>Your changes are on the server.\u003C\u002Fspan>\n\u003C\u002Fdiv>\n","html","",[18,275,276,302,329,339,346,363,377,391],{"__ignoreMap":273},[277,278,280,284,288,292,295,299],"span",{"class":155,"line":279},1,[277,281,283],{"class":282},"suds8","\u003C",[277,285,287],{"class":286},"sne4z","label",[277,289,291],{"class":290},"s-5SL"," class",[277,293,294],{"class":282},"=",[277,296,298],{"class":297},"sT6z2","\"reveal__label\"",[277,300,301],{"class":282},">\n",[277,303,305,308,311,314,316,319,321,323,326],{"class":155,"line":304},2,[277,306,307],{"class":282},"  \u003C",[277,309,310],{"class":286},"input",[277,312,313],{"class":290}," type",[277,315,294],{"class":282},[277,317,318],{"class":297},"\"checkbox\"",[277,320,291],{"class":290},[277,322,294],{"class":282},[277,324,325],{"class":297},"\"reveal__input\"",[277,327,328],{"class":282},"> Show notification\n",[277,330,332,335,337],{"class":155,"line":331},3,[277,333,334],{"class":282},"\u003C\u002F",[277,336,287],{"class":286},[277,338,301],{"class":282},[277,340,342],{"class":155,"line":341},4,[277,343,345],{"emptyLinePlaceholder":344},true,"\n",[277,347,349,351,354,356,358,361],{"class":155,"line":348},5,[277,350,283],{"class":282},[277,352,353],{"class":286},"div",[277,355,291],{"class":290},[277,357,294],{"class":282},[277,359,360],{"class":297},"\"reveal__panel\"",[277,362,301],{"class":282},[277,364,366,368,370,373,375],{"class":155,"line":365},6,[277,367,307],{"class":282},[277,369,55],{"class":286},[277,371,372],{"class":282},">Saved\u003C\u002F",[277,374,55],{"class":286},[277,376,301],{"class":282},[277,378,380,382,384,387,389],{"class":155,"line":379},7,[277,381,307],{"class":282},[277,383,277],{"class":286},[277,385,386],{"class":282},">Your changes are on the server.\u003C\u002F",[277,388,277],{"class":286},[277,390,301],{"class":282},[277,392,394,396,398],{"class":155,"line":393},8,[277,395,334],{"class":282},[277,397,353],{"class":286},[277,399,301],{"class":282},[268,401,405],{"className":402,"code":403,"language":404,"meta":273,"style":273},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".reveal__label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }\n\n\u002F* The \"after-change\" style: what the panel looks like once it is open. *\u002F\n.reveal__panel {\n  display: block;\n  margin-top: 1rem;\n  padding: .9rem 1rem;\n  border: 1px solid currentColor;\n  border-radius: 10px;\n  opacity: 1;\n  translate: 0 0;\n  transition:\n    opacity 260ms ease,\n    translate 260ms cubic-bezier(.2, .8, .2, 1),\n    display 260ms allow-discrete;\n}\n.reveal__panel span { display: block; font-size: .9rem; margin-top: .2rem; }\n\n\u002F* Closed state — display:none makes this a discrete change, hence allow-discrete above. *\u002F\n.reveal__input:not(:checked) ~ .reveal__panel {\n  display: none;\n  opacity: 0;\n  translate: 0 -8px;\n}\n\n\u002F* The before-change style: the values the panel animates FROM on its first rendered frame.\n   Without this block the panel would appear fully opaque and in place, instantly. *\u002F\n@starting-style {\n  .reveal__input:checked ~ .reveal__panel {\n    opacity: 0;\n    translate: 0 -8px;\n  }\n}\n","css",[18,406,407,461,465,471,479,492,506,525,545,560,572,588,597,615,651,664,670,710,715,721,743,754,765,781,786,791,797,803,810,823,835,851,857],{"__ignoreMap":273},[277,408,409,412,415,417,420,423,426,429,431,434,436,439,441,444,448,450,453,455,458],{"class":155,"line":279},[277,410,411],{"class":290},".reveal__label",[277,413,414],{"class":282}," { ",[277,416,261],{"class":290},[277,418,419],{"class":282},": ",[277,421,422],{"class":290},"inline-flex",[277,424,425],{"class":282},"; ",[277,427,428],{"class":290},"align-items",[277,430,419],{"class":282},[277,432,433],{"class":290},"center",[277,435,425],{"class":282},[277,437,438],{"class":290},"gap",[277,440,419],{"class":282},[277,442,443],{"class":290},".5",[277,445,447],{"class":446},"sHUrx","rem",[277,449,425],{"class":282},[277,451,452],{"class":290},"cursor",[277,454,419],{"class":282},[277,456,457],{"class":290},"pointer",[277,459,460],{"class":282},"; }\n",[277,462,463],{"class":155,"line":304},[277,464,345],{"emptyLinePlaceholder":344},[277,466,467],{"class":155,"line":331},[277,468,470],{"class":469},"sLBg1","\u002F* The \"after-change\" style: what the panel looks like once it is open. *\u002F\n",[277,472,473,476],{"class":155,"line":341},[277,474,475],{"class":290},".reveal__panel",[277,477,478],{"class":282}," {\n",[277,480,481,484,486,489],{"class":155,"line":348},[277,482,483],{"class":290},"  display",[277,485,419],{"class":282},[277,487,488],{"class":290},"block",[277,490,491],{"class":282},";\n",[277,493,494,497,499,502,504],{"class":155,"line":365},[277,495,496],{"class":290},"  margin-top",[277,498,419],{"class":282},[277,500,501],{"class":290},"1",[277,503,447],{"class":446},[277,505,491],{"class":282},[277,507,508,511,513,516,518,521,523],{"class":155,"line":379},[277,509,510],{"class":290},"  padding",[277,512,419],{"class":282},[277,514,515],{"class":290},".9",[277,517,447],{"class":446},[277,519,520],{"class":290}," 1",[277,522,447],{"class":446},[277,524,491],{"class":282},[277,526,527,530,532,534,537,540,543],{"class":155,"line":393},[277,528,529],{"class":290},"  border",[277,531,419],{"class":282},[277,533,501],{"class":290},[277,535,536],{"class":446},"px",[277,538,539],{"class":290}," solid",[277,541,542],{"class":290}," currentColor",[277,544,491],{"class":282},[277,546,548,551,553,556,558],{"class":155,"line":547},9,[277,549,550],{"class":290},"  border-radius",[277,552,419],{"class":282},[277,554,555],{"class":290},"10",[277,557,536],{"class":446},[277,559,491],{"class":282},[277,561,563,566,568,570],{"class":155,"line":562},10,[277,564,565],{"class":290},"  opacity",[277,567,419],{"class":282},[277,569,501],{"class":290},[277,571,491],{"class":282},[277,573,575,578,580,583,586],{"class":155,"line":574},11,[277,576,577],{"class":290},"  translate",[277,579,419],{"class":282},[277,581,582],{"class":290},"0",[277,584,585],{"class":290}," 0",[277,587,491],{"class":282},[277,589,591,594],{"class":155,"line":590},12,[277,592,593],{"class":290},"  transition",[277,595,596],{"class":282},":\n",[277,598,600,603,606,609,612],{"class":155,"line":599},13,[277,601,602],{"class":282},"    opacity ",[277,604,605],{"class":290},"260",[277,607,608],{"class":446},"ms",[277,610,611],{"class":290}," ease",[277,613,614],{"class":282},",\n",[277,616,618,621,623,625,628,631,634,637,640,642,644,646,648],{"class":155,"line":617},14,[277,619,620],{"class":282},"    translate ",[277,622,605],{"class":290},[277,624,608],{"class":446},[277,626,627],{"class":290}," cubic-bezier",[277,629,630],{"class":282},"(",[277,632,633],{"class":290},".2",[277,635,636],{"class":282},", ",[277,638,639],{"class":290},".8",[277,641,636],{"class":282},[277,643,633],{"class":290},[277,645,636],{"class":282},[277,647,501],{"class":290},[277,649,650],{"class":282},"),\n",[277,652,654,657,659,661],{"class":155,"line":653},15,[277,655,656],{"class":282},"    display ",[277,658,605],{"class":290},[277,660,608],{"class":446},[277,662,663],{"class":282}," allow-discrete;\n",[277,665,667],{"class":155,"line":666},16,[277,668,669],{"class":282},"}\n",[277,671,673,675,678,680,682,684,686,688,691,693,695,697,699,702,704,706,708],{"class":155,"line":672},17,[277,674,475],{"class":290},[277,676,677],{"class":286}," span",[277,679,414],{"class":282},[277,681,261],{"class":290},[277,683,419],{"class":282},[277,685,488],{"class":290},[277,687,425],{"class":282},[277,689,690],{"class":290},"font-size",[277,692,419],{"class":282},[277,694,515],{"class":290},[277,696,447],{"class":446},[277,698,425],{"class":282},[277,700,701],{"class":290},"margin-top",[277,703,419],{"class":282},[277,705,633],{"class":290},[277,707,447],{"class":446},[277,709,460],{"class":282},[277,711,713],{"class":155,"line":712},18,[277,714,345],{"emptyLinePlaceholder":344},[277,716,718],{"class":155,"line":717},19,[277,719,720],{"class":469},"\u002F* Closed state — display:none makes this a discrete change, hence allow-discrete above. *\u002F\n",[277,722,724,727,729,732,735,738,741],{"class":155,"line":723},20,[277,725,726],{"class":290},".reveal__input:not",[277,728,630],{"class":282},[277,730,731],{"class":290},":checked",[277,733,734],{"class":282},") ",[277,736,737],{"class":446},"~",[277,739,740],{"class":290}," .reveal__panel",[277,742,478],{"class":282},[277,744,746,748,750,752],{"class":155,"line":745},21,[277,747,483],{"class":290},[277,749,419],{"class":282},[277,751,139],{"class":290},[277,753,491],{"class":282},[277,755,757,759,761,763],{"class":155,"line":756},22,[277,758,565],{"class":290},[277,760,419],{"class":282},[277,762,582],{"class":290},[277,764,491],{"class":282},[277,766,768,770,772,774,777,779],{"class":155,"line":767},23,[277,769,577],{"class":290},[277,771,419],{"class":282},[277,773,582],{"class":290},[277,775,776],{"class":290}," -8",[277,778,536],{"class":446},[277,780,491],{"class":282},[277,782,784],{"class":155,"line":783},24,[277,785,669],{"class":282},[277,787,789],{"class":155,"line":788},25,[277,790,345],{"emptyLinePlaceholder":344},[277,792,794],{"class":155,"line":793},26,[277,795,796],{"class":469},"\u002F* The before-change style: the values the panel animates FROM on its first rendered frame.\n",[277,798,800],{"class":155,"line":799},27,[277,801,802],{"class":469},"   Without this block the panel would appear fully opaque and in place, instantly. *\u002F\n",[277,804,806,808],{"class":155,"line":805},28,[277,807,34],{"class":446},[277,809,478],{"class":282},[277,811,813,816,819,821],{"class":155,"line":812},29,[277,814,815],{"class":290},"  .reveal__input:checked",[277,817,818],{"class":446}," ~",[277,820,740],{"class":290},[277,822,478],{"class":282},[277,824,826,829,831,833],{"class":155,"line":825},30,[277,827,828],{"class":290},"    opacity",[277,830,419],{"class":282},[277,832,582],{"class":290},[277,834,491],{"class":282},[277,836,838,841,843,845,847,849],{"class":155,"line":837},31,[277,839,840],{"class":290},"    translate",[277,842,419],{"class":282},[277,844,582],{"class":290},[277,846,776],{"class":290},[277,848,536],{"class":446},[277,850,491],{"class":282},[277,852,854],{"class":155,"line":853},32,[277,855,856],{"class":282},"  }\n",[277,858,860],{"class":155,"line":859},33,[277,861,669],{"class":282},[14,863,864,865,867,868,871,872,875,876,879,880,883,884,886,887,889,890,894],{},"Three details are load-bearing. The ",[18,866,34],{}," selector targets the panel in its ",[78,869,870],{},"open"," state, because that is the style change being made — the rule describes where that state comes ",[78,873,874],{},"from",". The closed-state declarations are not redundant with it: they are what the panel transitions ",[78,877,878],{},"to"," on the way out. And ",[18,881,882],{},"display 260ms allow-discrete"," is required because a property going to ",[18,885,38],{}," would otherwise remove the box before ",[18,888,24],{}," had a chance to move; the mechanics of that keyword are covered in ",[27,891,893],{"href":892},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete\u002F","transitioning display with allow-discrete",".",[44,896],{},[47,898,900],{"id":899},"the-key-technique-a-rule-that-applies-for-exactly-one-frame","The key technique: a rule that applies for exactly one frame",[14,902,903,905],{},[18,904,34],{}," is not a state selector and it does not participate in the cascade the way a normal rule does. Its declarations are consulted only while the engine is assembling a before-change style for an element that does not have one, and they are thrown away immediately afterwards. That is why you cannot use it to \"set a default\" — one frame later the value inside it has no effect whatsoever, and the element's ordinary rules win.",[14,907,908,909,912,913,915,916,918,919,636,922,925,926,929],{},"The trigger condition is worth stating precisely, because it is broader than \"when the element is created\". Any ",[55,910,911],{},"first style change"," qualifies: an element inserted into the DOM, an element whose computed ",[18,914,261],{}," moves from ",[18,917,139],{}," to a rendered value, and an element promoted into the top layer by ",[18,920,921],{},"showPopover()",[18,923,924],{},"showModal()",", or the ",[18,927,928],{},"popover"," attribute. All three produce an element that is newly rendered from the style engine's point of view, and all three are therefore covered by the same rule.",[14,931,932],{},"The at-rule has two writable forms. The standalone form contains complete selectors:",[268,934,936],{"className":402,"code":935,"language":404,"meta":273,"style":273},"@starting-style {\n  .toast { opacity: 0; }\n}\n",[18,937,938,944,959],{"__ignoreMap":273},[277,939,940,942],{"class":155,"line":279},[277,941,34],{"class":446},[277,943,478],{"class":282},[277,945,946,949,951,953,955,957],{"class":155,"line":304},[277,947,948],{"class":290},"  .toast",[277,950,414],{"class":282},[277,952,24],{"class":290},[277,954,419],{"class":282},[277,956,582],{"class":290},[277,958,460],{"class":282},[277,960,961],{"class":155,"line":331},[277,962,669],{"class":282},[14,964,965],{},"The nested form lives inside the element's own rule and inherits its subject:",[268,967,969],{"className":402,"code":968,"language":404,"meta":273,"style":273},".toast {\n  opacity: 1;\n  transition: opacity 200ms ease;\n  @starting-style { opacity: 0; }\n}\n",[18,970,971,978,988,1004,1022],{"__ignoreMap":273},[277,972,973,976],{"class":155,"line":279},[277,974,975],{"class":290},".toast",[277,977,478],{"class":282},[277,979,980,982,984,986],{"class":155,"line":304},[277,981,565],{"class":290},[277,983,419],{"class":282},[277,985,501],{"class":290},[277,987,491],{"class":282},[277,989,990,992,995,998,1000,1002],{"class":155,"line":331},[277,991,593],{"class":290},[277,993,994],{"class":282},": opacity ",[277,996,997],{"class":290},"200",[277,999,608],{"class":446},[277,1001,611],{"class":290},[277,1003,491],{"class":282},[277,1005,1006,1009,1012,1014,1016,1018,1020],{"class":155,"line":341},[277,1007,1008],{"class":282},"  @",[277,1010,1011],{"class":290},"starting-style",[277,1013,414],{"class":282},[277,1015,24],{"class":290},[277,1017,419],{"class":282},[277,1019,582],{"class":290},[277,1021,460],{"class":282},[277,1023,1024],{"class":155,"line":348},[277,1025,669],{"class":282},[14,1027,1028],{},"Prefer the nested form for component CSS. It keeps the starting values physically next to the values they animate toward, and it cannot drift out of sync with the selector when the class name changes.",[44,1030],{},[47,1032,1034],{"id":1033},"variation-entry-motion-for-a-popover-in-the-top-layer","Variation: entry motion for a popover in the top layer",[14,1036,1037,1038,1041,1042,894],{},"A popover is the sharpest case, because the element is both newly rendered and moved into the top layer. The ",[18,1039,1040],{},"overlay"," property that tracks top-layer membership is discrete, so a clean exit needs it listed alongside ",[18,1043,261],{},[268,1045,1047],{"className":402,"code":1046,"language":404,"meta":273,"style":273},".tip {\n  opacity: 1;\n  scale: 1;\n  transition:\n    opacity 180ms ease,\n    scale 180ms cubic-bezier(.2, .9, .3, 1),\n    display 180ms allow-discrete,\n    overlay 180ms allow-discrete;\n\n  \u002F* Nested starting rule: the values used on the popover's first rendered frame. *\u002F\n  @starting-style {\n    &:popover-open { opacity: 0; scale: .94; }\n  }\n}\n.tip:not(:popover-open) { opacity: 0; scale: .94; }\n\n@media (prefers-reduced-motion: reduce) {\n  .tip { transition-duration: 1ms; }\n}\n",[18,1048,1049,1056,1066,1077,1083,1096,1126,1137,1149,1153,1158,1166,1185,1189,1193,1223,1227,1235,1253],{"__ignoreMap":273},[277,1050,1051,1054],{"class":155,"line":279},[277,1052,1053],{"class":290},".tip",[277,1055,478],{"class":282},[277,1057,1058,1060,1062,1064],{"class":155,"line":304},[277,1059,565],{"class":290},[277,1061,419],{"class":282},[277,1063,501],{"class":290},[277,1065,491],{"class":282},[277,1067,1068,1071,1073,1075],{"class":155,"line":331},[277,1069,1070],{"class":290},"  scale",[277,1072,419],{"class":282},[277,1074,501],{"class":290},[277,1076,491],{"class":282},[277,1078,1079,1081],{"class":155,"line":341},[277,1080,593],{"class":290},[277,1082,596],{"class":282},[277,1084,1085,1087,1090,1092,1094],{"class":155,"line":348},[277,1086,602],{"class":282},[277,1088,1089],{"class":290},"180",[277,1091,608],{"class":446},[277,1093,611],{"class":290},[277,1095,614],{"class":282},[277,1097,1098,1101,1103,1105,1107,1109,1111,1113,1115,1117,1120,1122,1124],{"class":155,"line":365},[277,1099,1100],{"class":282},"    scale ",[277,1102,1089],{"class":290},[277,1104,608],{"class":446},[277,1106,627],{"class":290},[277,1108,630],{"class":282},[277,1110,633],{"class":290},[277,1112,636],{"class":282},[277,1114,515],{"class":290},[277,1116,636],{"class":282},[277,1118,1119],{"class":290},".3",[277,1121,636],{"class":282},[277,1123,501],{"class":290},[277,1125,650],{"class":282},[277,1127,1128,1130,1132,1134],{"class":155,"line":379},[277,1129,656],{"class":282},[277,1131,1089],{"class":290},[277,1133,608],{"class":446},[277,1135,1136],{"class":282}," allow-discrete,\n",[277,1138,1139,1142,1145,1147],{"class":155,"line":393},[277,1140,1141],{"class":290},"    overlay",[277,1143,1144],{"class":290}," 180",[277,1146,608],{"class":446},[277,1148,663],{"class":282},[277,1150,1151],{"class":155,"line":547},[277,1152,345],{"emptyLinePlaceholder":344},[277,1154,1155],{"class":155,"line":562},[277,1156,1157],{"class":469},"  \u002F* Nested starting rule: the values used on the popover's first rendered frame. *\u002F\n",[277,1159,1160,1162,1164],{"class":155,"line":574},[277,1161,1008],{"class":282},[277,1163,1011],{"class":290},[277,1165,478],{"class":282},[277,1167,1168,1171,1173,1175,1178,1180,1183],{"class":155,"line":590},[277,1169,1170],{"class":282},"    &:popover-open { opacity: ",[277,1172,582],{"class":290},[277,1174,425],{"class":282},[277,1176,1177],{"class":290},"scale",[277,1179,419],{"class":282},[277,1181,1182],{"class":290},".94",[277,1184,460],{"class":282},[277,1186,1187],{"class":155,"line":599},[277,1188,856],{"class":282},[277,1190,1191],{"class":155,"line":617},[277,1192,669],{"class":282},[277,1194,1195,1198,1201,1204,1207,1209,1211,1213,1215,1217,1219,1221],{"class":155,"line":653},[277,1196,1197],{"class":290},".tip:not",[277,1199,1200],{"class":282},"(:",[277,1202,1203],{"class":286},"popover-open",[277,1205,1206],{"class":282},") { ",[277,1208,24],{"class":290},[277,1210,419],{"class":282},[277,1212,582],{"class":290},[277,1214,425],{"class":282},[277,1216,1177],{"class":290},[277,1218,419],{"class":282},[277,1220,1182],{"class":290},[277,1222,460],{"class":282},[277,1224,1225],{"class":155,"line":666},[277,1226,345],{"emptyLinePlaceholder":344},[277,1228,1229,1232],{"class":155,"line":672},[277,1230,1231],{"class":446},"@media",[277,1233,1234],{"class":282}," (prefers-reduced-motion: reduce) {\n",[277,1236,1237,1240,1242,1245,1247,1249,1251],{"class":155,"line":712},[277,1238,1239],{"class":290},"  .tip",[277,1241,414],{"class":282},[277,1243,1244],{"class":290},"transition-duration",[277,1246,419],{"class":282},[277,1248,501],{"class":290},[277,1250,608],{"class":446},[277,1252,460],{"class":282},[277,1254,1255],{"class":155,"line":717},[277,1256,669],{"class":282},[14,1258,1259,1260,1263,1264,1267,1268,894],{},"Note the reduced-motion branch collapses the duration rather than removing the transition outright. Setting ",[18,1261,1262],{},"transition: none"," would also strip the ",[18,1265,1266],{},"allow-discrete"," behaviour and re-introduce the abrupt removal; a 1ms duration keeps the discrete sequencing intact while making the movement imperceptible. The same pattern extends to anchored overlays covered in ",[27,1269,1271],{"href":1270},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling\u002F","the popover attribute and CSS styling",[44,1273],{},[47,1275,1277],{"id":1276},"browser-support-note","Browser support note",[14,1279,1280,1282,1283,1286,1287,1289,1290,1292,1293,1296],{},[18,1281,34],{}," shipped alongside ",[18,1284,1285],{},"transition-behavior"," in Chrome and Edge 117+ and Firefox 129+, and in Safari 17.5+ (one point release after ",[18,1288,1285],{},", which landed in 17.4). It is available in every evergreen engine as of mid-2026. Nesting a ",[18,1291,34],{}," block inside a style rule requires the same support as CSS nesting generally, which is comfortably older than the at-rule itself. The fallback is inherently benign: an engine that does not recognise the at-rule discards it as an unknown construct, the element appears at its final style with no entry motion, and nothing else in the sheet is affected. Because the failure mode is \"no animation\" rather than \"broken layout\", an ",[18,1294,1295],{},"@supports at-rule(@starting-style)"," guard is optional rather than necessary.",[44,1298],{},[47,1300,1302],{"id":1301},"faq","FAQ",[14,1304,1305,1308],{},[55,1306,1307],{},"Why does a transition never run the first time an element is rendered?","\nA transition interpolates between a before-change style and an after-change style, and a freshly rendered element has no before-change style for the engine to diff against. With only one style available nothing differs, so no transition is created and the final value paints immediately.",[14,1310,1311,1314],{},[55,1312,1313],{},"Where do I put the @starting-style rule?","\nEither as a standalone at-rule containing a full selector, or nested inside the rule for the element itself. The nested form is scoped to that rule's subject, which keeps the starting values next to the values they animate toward and avoids accidentally matching other elements sharing the class.",[14,1316,1317,1320,1321,1323],{},[55,1318,1319],{},"Does @starting-style also apply when an element becomes visible again?","\nYes. It applies to any first style change, which includes an element moving from ",[18,1322,38],{}," to a rendered state and an element being promoted into the top layer, not just the initial page render.",[14,1325,1326,1329],{},[55,1327,1328],{},"Does @starting-style work with keyframe animations?","\nNo. It feeds CSS transitions only, because only transitions need a before-change style. A keyframe animation already declares its own opening frame and runs on element creation without extra help.",[44,1331],{},[47,1333,1335],{"id":1334},"related","Related",[1337,1338,1339,1345,1351,1358,1365],"ul",{},[1340,1341,1342,1344],"li",{},[27,1343,30],{"href":29}," — the parent guide covering transition syntax and property selection.",[1340,1346,1347,1350],{},[27,1348,1349],{"href":892},"Transitioning display with allow-discrete"," — the exit half of the lifecycle this page starts.",[1340,1352,1353,1357],{},[27,1354,1356],{"href":1355},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions\u002F","CSS transition timing functions"," — pick an easing curve that suits an arrival rather than a departure.",[1340,1359,1360,1364],{},[27,1361,1363],{"href":1362},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure\u002F","CSS-only accordions and disclosure"," — a disclosure widget whose panel needs the same first-render treatment.",[1340,1366,1367,1371],{},[27,1368,1370],{"href":1369},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips\u002F","Anchor positioned tooltips"," — position the overlays that these entry animations reveal.",[1373,1374,1375],"style",{},"html pre.shiki code .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}",{"title":273,"searchDepth":304,"depth":304,"links":1377},[1378,1379,1380,1381,1382,1383,1384,1385],{"id":49,"depth":304,"text":50},{"id":94,"depth":304,"text":95},{"id":251,"depth":304,"text":252},{"id":899,"depth":304,"text":900},{"id":1033,"depth":304,"text":1034},{"id":1276,"depth":304,"text":1277},{"id":1301,"depth":304,"text":1302},{"id":1334,"depth":304,"text":1335},"Use @starting-style to give an element a before-change style so its first render animates, and pair it with allow-discrete for display and top-layer motion.","md",{"pageTitle":1389,"datePublished":1390,"dateModified":1390,"faq":1391},"@starting-style entry animations","2026-07-20",[1392,1394,1396,1398],{"q":1307,"a":1393},"A transition needs two computed styles to interpolate between, and a freshly rendered element has no previous one. The browser therefore has nothing to animate from and paints the final style immediately. @starting-style supplies that missing previous style.",{"q":1313,"a":1395},"Either as a standalone at-rule containing a full selector, or nested inside the rule for the element itself. The nested form is scoped to that rule's subject, which avoids accidentally matching other elements that share a class.",{"q":1319,"a":1397},"Yes. It applies to any first style change, which includes an element going from display:none to a rendered state and an element being promoted into the top layer, not only the initial page render.",{"q":1328,"a":1399},"No. It only feeds CSS transitions, because only transitions need a before-change style. A keyframe animation already declares its own starting frame and runs on element creation without any extra help.","\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations",{"title":5,"description":1386},"css-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations\u002Findex","9j1qLPqIWmkr9lIAjAL2IbnunzKEPTm0jd5QtjCDsLw",[1405,1408,1411,1414,1417,1420,1423,1426,1429,1432,1435,1438,1441,1444,1447,1450,1453,1456,1459,1462,1463,1466,1469,1472,1475,1478,1481,1484,1487,1490,1493,1496,1499,1502,1505,1508,1511,1514,1517,1520,1523,1526,1529,1532,1535,1538,1541,1544,1547,1550,1553,1556,1559,1562,1565,1568,1571,1574,1577,1580,1583,1586,1589,1592,1595,1598,1601,1604,1607,1610,1613,1616,1619,1622,1625,1628,1631,1634,1637,1640,1643,1646,1649,1652,1655,1658,1661,1664],{"path":1406,"title":1407},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fcreating-accessible-focus-indicators","Creating Accessible Focus Indicators: Building a Ring That Survives Any Background",{"path":1409,"title":1410},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1412,"title":1413},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1415,"title":1416},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css","Reducing Motion Preferences in CSS: How the Setting Becomes a Media Feature",{"path":1418,"title":1419},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Ftarget-size-and-pointer-accessibility","Target Size and Pointer Accessibility: Meeting 2.5.8 Without Redesigning",{"path":1421,"title":1422},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1424,"title":1425},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1427,"title":1428},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1430,"title":1431},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1433,"title":1434},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size","Motion That Scales with Container Size: cqi, cqb, and Derived Durations",{"path":1436,"title":1437},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1439,"title":1440},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1442,"title":1443},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwhen-to-use-javascript-animation","When to Use JavaScript Instead of CSS for Animation",{"path":1445,"title":1446},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fanimating-custom-properties-with-at-property","Animating Custom Properties with @property: Typed Variables That Interpolate",{"path":1448,"title":1449},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1451,"title":1452},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1454,"title":1455},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fregistered-properties-and-type-safety","Registered Properties and Type Safety: @property as a Contract for Design Tokens",{"path":1457,"title":1458},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1460,"title":1461},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1400,"title":5},{"path":1464,"title":1465},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1467,"title":1468},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1470,"title":1471},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-visible-vs-focus-polyfill-alternatives"," vs :focus: Why It Replaced the Focus-Ring Polyfill",{"path":1473,"title":1474},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1476,"title":1477},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1479,"title":1480},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries","Pointer and Hover Media Queries: Gating Affordances by Input Capability",{"path":1482,"title":1483},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript","Smooth Hover Effects Without JavaScript: CSS-Only Patterns for Modern UI",{"path":1485,"title":1486},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1488,"title":1489},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1491,"title":1492},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1494,"title":1495},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-loading-spinners-and-skeletons","CSS-Only Loading Spinners and Skeleton Shimmer Screens with @keyframes",{"path":1497,"title":1498},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-toggle-switches-and-checkboxes","CSS-Only Toggle Switches and Checkboxes That Keep the Native Input",{"path":1500,"title":1501},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1503,"title":1504},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1506,"title":1507},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1509,"title":1510},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1512,"title":1513},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fprofiling-animations-in-devtools","Profiling CSS Animations in DevTools: Finding the Frame That Costs Too Much",{"path":1515,"title":1516},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fwill-change-and-the-compositor-thread","will-change and the Compositor Thread: Layer Promotion Without the Footguns",{"path":1518,"title":1519},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1521,"title":1522},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1524,"title":1525},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1527,"title":1528},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1530,"title":1531},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1533,"title":1534},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions","Writing a Same-Document View Transition: the CSS You Actually Author",{"path":1536,"title":1537},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements","view-transition-name and Shared Elements: Morphing a Thumbnail into a Hero",{"path":1539,"title":1540},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":1542,"title":1543},"\u002F","Modern CSS Layouts & Micro-Interactions",{"path":1545,"title":1546},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1548,"title":1549},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":1551,"title":1552},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":1554,"title":1555},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":1557,"title":1558},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":1560,"title":1561},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":1563,"title":1564},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":1566,"title":1567},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-units-cqi-cqb-explained","Container Query Units Explained: cqi, cqb, cqw, cqh, cqmin and cqmax",{"path":1569,"title":1570},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":1572,"title":1573},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":1575,"title":1576},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fhow-to-use-container-queries-in-production","How to Use Container Queries in Production Without a Rewrite",{"path":1578,"title":1579},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":1581,"title":1582},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":1584,"title":1585},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":1587,"title":1588},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fbuilding-a-dashboard-with-subgrid","Building a Responsive Dashboard Where Cards Align with Subgrid",{"path":1590,"title":1591},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fholy-grail-layout-with-grid","The Holy-Grail Layout with CSS Grid and Container Queries",{"path":1593,"title":1594},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":1596,"title":1597},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":1599,"title":1600},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fclamp-vs-media-query-typography","clamp() Fluid Type vs Media-Query Step Typography: Tradeoffs and Anatomy",{"path":1602,"title":1603},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-space-scale-with-clamp","Building a Fluid Spacing Scale with clamp() and Container Units",{"path":1605,"title":1606},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":1608,"title":1609},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":1611,"title":1612},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":1614,"title":1615},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":1617,"title":1618},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":1620,"title":1621},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":1623,"title":1624},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":1626,"title":1627},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":1629,"title":1630},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":1632,"title":1633},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":1635,"title":1636},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":1638,"title":1639},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fbuilding-responsive-cards-with-container-queries","Building Responsive Cards with Container Queries: A Production-Ready Guide",{"path":1641,"title":1642},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":1644,"title":1645},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":1647,"title":1648},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":1650,"title":1651},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":1653,"title":1654},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":1656,"title":1657},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcontainer-style-query-theming","Container Style Query Theming: One Token Instead of a Variant Class Matrix",{"path":1659,"title":1660},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":1662,"title":1663},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-queries-with-custom-properties","Style Queries With Custom Properties: Declaring, Inheriting, and Matching Tokens",{"path":1665,"title":1666},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-fallbacks-and-support","Style Query Fallbacks and Support: Designing for Older Browser Versions",1784566157995]