[{"data":1,"prerenderedAt":2314},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion\u002F":3,"content-all-pages":2051},{"id":4,"title":5,"body":6,"description":2033,"extension":2034,"meta":2035,"navigation":537,"path":2047,"seo":2048,"stem":2049,"__hash__":2050},"content\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion\u002Findex.md","Honouring prefers-reduced-motion in View Transitions",{"type":7,"value":8,"toc":2022},"minimark",[9,13,37,40,43,52,59,132,143,153,273,275,279,282,285,289,291,295,298,1732,1735,1737,1741,1748,1764,1775,1787,1789,1793,1796,1898,1912,1925,1927,1931,1936,1939,1941,1945,1951,1957,1971,1977,1979,1983,2019],[10,11,5],"h1",{"id":12},"honouring-prefers-reduced-motion-in-view-transitions",[14,15,16,17,21,22,25,26,30,31,36],"p",{},"A shared-element morph is exactly the kind of motion that causes trouble. A large object travels a long distance across the viewport while changing size — high velocity, large screen area, and a scale change all at once. For a user with a vestibular disorder that combination is not a nice touch; it is a symptom trigger. The obvious response is to bolt a ",[18,19,20],"code",{},"prefers-reduced-motion"," media query onto the animations and set them to ",[18,23,24],{},"none",", and that response produces a ",[27,28,29],"em",{},"worse"," experience than doing nothing. This page, part of ",[32,33,35],"a",{"href":34},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002F","View Transitions for CSS Developers",", explains why, and what to write instead.",[14,38,39],{},"The narrow problem: you have a working transition with travel in it, and you need a version of it that satisfies a reduced-motion request without turning the interface into a series of hard cuts.",[41,42],"hr",{},[44,45,47,48,51],"h2",{"id":46},"why-animation-none-is-the-wrong-instinct","Why ",[18,49,50],{},"animation: none"," is the wrong instinct",[14,53,54,55,58],{},"The preference is not a request to remove feedback. It is a request to remove ",[27,56,57],{},"movement"," — the WCAG guidance behind it targets motion that implies physical displacement, not changes of state as such. Removing the animation removes the movement, so on the face of it the override looks correct:",[60,61,66],"pre",{"className":62,"code":63,"language":64,"meta":65,"style":65},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","@media (prefers-reduced-motion: reduce) {\n  ::view-transition-old(*),\n  ::view-transition-new(*) {\n    animation: none;\n  }\n}\n","css","",[18,67,68,81,94,105,120,126],{"__ignoreMap":65},[69,70,73,77],"span",{"class":71,"line":72},"line",1,[69,74,76],{"class":75},"sHUrx","@media",[69,78,80],{"class":79},"suds8"," (prefers-reduced-motion: reduce) {\n",[69,82,84,87,91],{"class":71,"line":83},2,[69,85,86],{"class":79},"  ::view-transition-old(",[69,88,90],{"class":89},"sne4z","*",[69,92,93],{"class":79},"),\n",[69,95,97,100,102],{"class":71,"line":96},3,[69,98,99],{"class":79},"  ::view-transition-new(",[69,101,90],{"class":89},[69,103,104],{"class":79},") {\n",[69,106,108,112,115,117],{"class":71,"line":107},4,[69,109,111],{"class":110},"s-5SL","    animation",[69,113,114],{"class":79},": ",[69,116,24],{"class":110},[69,118,119],{"class":79},";\n",[69,121,123],{"class":71,"line":122},5,[69,124,125],{"class":79},"  }\n",[69,127,129],{"class":71,"line":128},6,[69,130,131],{"class":79},"}\n",[14,133,134,135,138,139,142],{},"The catch is that this cancels the ",[27,136,137],{},"animations"," but not the ",[27,140,141],{},"transition",". The browser still captures both states, still builds the overlay, still creates a group for every named element, and still has to reconcile two different measured rectangles. What it no longer has is a smooth path between them. The snapshot is placed at its start geometry on one frame and its end geometry on the next, so the element teleports — a full-size jump completed in 16 milliseconds. Instantaneous large-area change is precisely what a startle response is tuned to detect. You have replaced a 400ms glide with a single-frame snap, which is more alarming, not less.",[14,144,145,146,148,149,152],{},"There is a second, subtler failure. ",[18,147,50],{}," on the snapshots leaves the ",[27,150,151],{},"group"," animation untouched, because the group is a separate pseudo-element with its own generated animation. So the box still resizes over 250ms while the images inside it are frozen at full opacity, producing a stretched, sliding rectangle with no cross-fade to disguise it. If you are going to override, you have to override the group too, or you get the worst of both.",[154,155,161,162,161,166,161,170,161,177,161,188,161,193,161,200,161,205,161,209,161,213,161,218,161,221,161,224,161,228,161,231,161,234,161,237,161,240,161,245,161,247,161,251,161,255,161,259,161,262,161,265,161,268],"svg",{"viewBox":156,"role":157,"ariaLabel":158,"xmlns":159,"style":160},"0 0 720 310","img","Three reduced-motion strategies compared: cancel the animation, skip the transition, or cross-fade only","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[163,164,165],"title",{},"Three reduced-motion strategies compared",[167,168,169],"desc",{},"Cancelling the animation snaps, skipping the transition cuts cleanly, and a cross-fade-only override keeps continuity without travel.",[171,172,176],"text",{"x":173,"y":174,"style":175},"360","28","text-anchor:middle;fill:currentColor;font:700 18px sans-serif","Three responses to a reduced-motion request",[178,179],"rect",{"x":180,"y":181,"width":182,"height":183,"rx":184,"fill":24,"stroke":185,"strokeWidth":186,"opacity":187},"20","64","220","196","10","currentColor","1.5","0.45",[171,189,50],{"x":190,"y":191,"style":192},"130","94","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace",[71,194],{"x1":195,"y1":196,"x2":197,"y2":196,"stroke":185,"strokeWidth":198,"opacity":199},"36","108","224","1","0.35",[171,201,204],{"x":190,"y":202,"style":203},"134","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.8","overlay is still built",[171,206,208],{"x":190,"y":207,"style":203},"156","geometry jumps a frame",[171,210,212],{"x":190,"y":211,"style":203},"178","group keeps resizing",[171,214,217],{"x":190,"y":215,"style":216},"228","text-anchor:middle;fill:currentColor;font:600 13px sans-serif","jarring snap",[178,219],{"x":220,"y":181,"width":182,"height":183,"rx":184,"fill":24,"stroke":185,"strokeWidth":186,"opacity":187},"250",[171,222,223],{"x":173,"y":191,"style":192},"skip in script",[71,225],{"x1":226,"y1":196,"x2":227,"y2":196,"stroke":185,"strokeWidth":198,"opacity":199},"266","454",[171,229,230],{"x":173,"y":202,"style":203},"no capture, no overlay",[171,232,233],{"x":173,"y":207,"style":203},"content simply replaces",[171,235,236],{"x":173,"y":211,"style":203},"no continuity cue",[171,238,239],{"x":173,"y":215,"style":216},"honest but abrupt",[178,241],{"x":242,"y":181,"width":182,"height":183,"rx":184,"fill":243,"opacity":244},"480","#7aa2ff","0.14",[178,246],{"x":242,"y":181,"width":182,"height":183,"rx":184,"fill":24,"stroke":243,"strokeWidth":186},[171,248,250],{"x":249,"y":191,"style":192},"590","cross-fade only",[71,252],{"x1":253,"y1":196,"x2":254,"y2":196,"stroke":185,"strokeWidth":198,"opacity":199},"496","684",[171,256,258],{"x":249,"y":202,"style":257},"text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.85","opacity, no travel",[171,260,261],{"x":249,"y":207,"style":257},"group held to one box",[171,263,264],{"x":249,"y":211,"style":257},"short, timed hand-off",[171,266,267],{"x":249,"y":215,"style":216},"preferred default",[171,269,272],{"x":173,"y":270,"style":271},"294","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.7","Remove the movement, keep the continuity.",[41,274],{},[44,276,278],{"id":277},"the-approach-substitute-do-not-subtract","The approach: substitute, do not subtract",[14,280,281],{},"The reliable pattern is to treat reduced motion as a different design, not a disabled one. A cross-fade satisfies the preference on every axis that matters — nothing translates, nothing scales, nothing rotates, and the area of the screen in motion is zero — while still telling the user that one state became another over a measurable span of time.",[14,283,284],{},"The demo below puts the two side by side: the travelling version on the left, the substitute on the right. Both are timed; only one moves.",[286,287],"live-demo",{"name":288},"vt-reduced-motion-variants",[41,290],{},[44,292,294],{"id":293},"complete-working-implementation","Complete working implementation",[14,296,297],{},"The full override for a page that morphs a thumbnail into a hero. Three things have to be neutralised — the group's geometry animation, any custom snapshot keyframes, and the default cross-fade's duration — and one thing has to be preserved: a fade.",[60,299,303],{"className":300,"code":301,"language":302,"meta":65,"style":65},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n\u003Chead>\n\u003Cmeta charset=\"utf-8\">\n\u003Ctitle>Reduced-motion view transition\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font-family: system-ui, sans-serif; margin: 2rem; }\n  .hero { width: 100%; aspect-ratio: 16 \u002F 9; object-fit: cover; border-radius: 12px; }\n  .panel { padding: 1.5rem; border: 1px solid currentColor; border-radius: 12px; }\n\n  \u002F* ---- Full-motion design (the default) ---------------------------- *\u002F\n\n  @keyframes vt-rise {\n    from { opacity: 0; transform: translateY(24px) scale(0.96); }\n    to   { opacity: 1; transform: translateY(0) scale(1); }\n  }\n  @keyframes vt-sink {\n    from { opacity: 1; transform: translateY(0) scale(1); }\n    to   { opacity: 0; transform: translateY(-16px) scale(0.98); }\n  }\n\n  ::view-transition-new(hero-shot) {\n    animation: vt-rise 420ms cubic-bezier(0.32, 0.72, 0, 1) both;\n  }\n  ::view-transition-old(hero-shot) {\n    animation: vt-sink 420ms cubic-bezier(0.32, 0.72, 0, 1) both;\n  }\n  ::view-transition-group(hero-shot) {\n    animation-duration: 420ms;\n    animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);\n  }\n\n  \u002F* ---- Reduced-motion design (the substitute) ---------------------- *\u002F\n\n  @media (prefers-reduced-motion: reduce) {\n    \u002F* 1. Replace the travelling keyframes with a pure opacity pair.\n          Explicit keyframes, NOT 'animation: none' — cancelling here\n          leaves the snapshot to jump between two geometries. *\u002F\n    @keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }\n    @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }\n\n    ::view-transition-new(*) {\n      animation: vt-fade-in 160ms linear both;\n    }\n    ::view-transition-old(*) {\n      animation: vt-fade-out 160ms linear both;\n    }\n\n    \u002F* 2. Collapse the group's geometry animation. Duration 0 makes the\n          box adopt its final rectangle immediately, so the fade happens\n          in place at the destination size instead of gliding into it. *\u002F\n    ::view-transition-group(*) {\n      animation-duration: 0s;\n    }\n\n    \u002F* 3. Keep an opaque backdrop so the in-place fade never shows the\n          live DOM through two semi-transparent snapshots. *\u002F\n    ::view-transition { background-color: Canvas; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n\n\u003Cimg class=\"hero\" id=\"hero\" src=\"\u002Fimg\u002F7.jpg\" alt=\"Coastal path\">\n\u003Cdiv class=\"panel\" id=\"panel\">\u003Cp>Coastal path, north shore.\u003C\u002Fp>\u003C\u002Fdiv>\n\u003Cbutton type=\"button\" id=\"next\">Next photo\u003C\u002Fbutton>\n\n\u003Cscript>\n  const hero = document.getElementById('hero');\n  const panel = document.getElementById('panel');\n  const shots = [\n    { src: '\u002Fimg\u002F7.jpg',  alt: 'Coastal path',    text: 'Coastal path, north shore.' },\n    { src: '\u002Fimg\u002F12.jpg', alt: 'Harbour at dusk', text: 'Harbour at dusk, low tide.' }\n  ];\n  let i = 0;\n\n  function swap() {\n    i = (i + 1) % shots.length;\n    hero.src = shots[i].src;\n    hero.alt = shots[i].alt;\n    panel.innerHTML = '\u003Cp>' + shots[i].text + '\u003C\u002Fp>';\n  }\n\n  document.getElementById('next').addEventListener('click', () => {\n    hero.style.viewTransitionName = 'hero-shot';\n    if (!document.startViewTransition) { swap(); return; }\n    document.startViewTransition(swap).finished\n      .then(() => { hero.style.viewTransitionName = ''; });\n  });\n\u003C\u002Fscript>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[18,304,305,319,338,347,364,377,386,426,486,532,539,546,551,564,612,649,654,664,699,738,743,748,758,800,805,814,850,855,865,879,909,914,919,925,930,938,944,950,956,996,1030,1035,1045,1067,1073,1083,1101,1106,1111,1117,1123,1129,1139,1154,1159,1164,1170,1176,1193,1198,1208,1217,1227,1232,1272,1310,1340,1345,1355,1381,1402,1415,1439,1462,1468,1484,1489,1501,1530,1541,1552,1576,1581,1586,1618,1631,1657,1669,1694,1700,1709,1714,1723],{"__ignoreMap":65},[69,306,307,310,313,316],{"class":71,"line":72},[69,308,309],{"class":79},"\u003C!",[69,311,312],{"class":89},"DOCTYPE",[69,314,315],{"class":110}," html",[69,317,318],{"class":79},">\n",[69,320,321,324,326,329,332,336],{"class":71,"line":83},[69,322,323],{"class":79},"\u003C",[69,325,302],{"class":89},[69,327,328],{"class":110}," lang",[69,330,331],{"class":79},"=",[69,333,335],{"class":334},"sT6z2","\"en\"",[69,337,318],{"class":79},[69,339,340,342,345],{"class":71,"line":96},[69,341,323],{"class":79},[69,343,344],{"class":89},"head",[69,346,318],{"class":79},[69,348,349,351,354,357,359,362],{"class":71,"line":107},[69,350,323],{"class":79},[69,352,353],{"class":89},"meta",[69,355,356],{"class":110}," charset",[69,358,331],{"class":79},[69,360,361],{"class":334},"\"utf-8\"",[69,363,318],{"class":79},[69,365,366,368,370,373,375],{"class":71,"line":122},[69,367,323],{"class":79},[69,369,163],{"class":89},[69,371,372],{"class":79},">Reduced-motion view transition\u003C\u002F",[69,374,163],{"class":89},[69,376,318],{"class":79},[69,378,379,381,384],{"class":71,"line":128},[69,380,323],{"class":79},[69,382,383],{"class":89},"style",[69,385,318],{"class":79},[69,387,389,392,395,398,400,403,406,409,412,415,417,420,423],{"class":71,"line":388},7,[69,390,391],{"class":89},"  body",[69,393,394],{"class":79}," { ",[69,396,397],{"class":110},"font-family",[69,399,114],{"class":79},[69,401,402],{"class":110},"system-ui",[69,404,405],{"class":79},", ",[69,407,408],{"class":110},"sans-serif",[69,410,411],{"class":79},"; ",[69,413,414],{"class":110},"margin",[69,416,114],{"class":79},[69,418,419],{"class":110},"2",[69,421,422],{"class":75},"rem",[69,424,425],{"class":79},"; }\n",[69,427,429,432,434,437,439,442,445,447,450,452,455,458,461,463,466,468,471,473,476,478,481,484],{"class":71,"line":428},8,[69,430,431],{"class":110},"  .hero",[69,433,394],{"class":79},[69,435,436],{"class":110},"width",[69,438,114],{"class":79},[69,440,441],{"class":110},"100",[69,443,444],{"class":75},"%",[69,446,411],{"class":79},[69,448,449],{"class":110},"aspect-ratio",[69,451,114],{"class":79},[69,453,454],{"class":110},"16",[69,456,457],{"class":79}," \u002F ",[69,459,460],{"class":110},"9",[69,462,411],{"class":79},[69,464,465],{"class":110},"object-fit",[69,467,114],{"class":79},[69,469,470],{"class":110},"cover",[69,472,411],{"class":79},[69,474,475],{"class":110},"border-radius",[69,477,114],{"class":79},[69,479,480],{"class":110},"12",[69,482,483],{"class":75},"px",[69,485,425],{"class":79},[69,487,489,492,494,497,499,501,503,505,508,510,512,514,517,520,522,524,526,528,530],{"class":71,"line":488},9,[69,490,491],{"class":110},"  .panel",[69,493,394],{"class":79},[69,495,496],{"class":110},"padding",[69,498,114],{"class":79},[69,500,186],{"class":110},[69,502,422],{"class":75},[69,504,411],{"class":79},[69,506,507],{"class":110},"border",[69,509,114],{"class":79},[69,511,198],{"class":110},[69,513,483],{"class":75},[69,515,516],{"class":110}," solid",[69,518,519],{"class":110}," currentColor",[69,521,411],{"class":79},[69,523,475],{"class":110},[69,525,114],{"class":79},[69,527,480],{"class":110},[69,529,483],{"class":75},[69,531,425],{"class":79},[69,533,535],{"class":71,"line":534},10,[69,536,538],{"emptyLinePlaceholder":537},true,"\n",[69,540,542],{"class":71,"line":541},11,[69,543,545],{"class":544},"sLBg1","  \u002F* ---- Full-motion design (the default) ---------------------------- *\u002F\n",[69,547,549],{"class":71,"line":548},12,[69,550,538],{"emptyLinePlaceholder":537},[69,552,554,557,561],{"class":71,"line":553},13,[69,555,556],{"class":75},"  @keyframes",[69,558,560],{"class":559},"soyes"," vt-rise",[69,562,563],{"class":79}," {\n",[69,565,567,570,572,575,577,580,582,585,587,590,593,596,598,601,604,606,609],{"class":71,"line":566},14,[69,568,569],{"class":110},"    from",[69,571,394],{"class":79},[69,573,574],{"class":110},"opacity",[69,576,114],{"class":79},[69,578,579],{"class":110},"0",[69,581,411],{"class":79},[69,583,584],{"class":110},"transform",[69,586,114],{"class":79},[69,588,589],{"class":110},"translateY",[69,591,592],{"class":79},"(",[69,594,595],{"class":110},"24",[69,597,483],{"class":75},[69,599,600],{"class":79},") ",[69,602,603],{"class":110},"scale",[69,605,592],{"class":79},[69,607,608],{"class":110},"0.96",[69,610,611],{"class":79},"); }\n",[69,613,615,618,621,623,625,627,629,631,633,635,637,639,641,643,645,647],{"class":71,"line":614},15,[69,616,617],{"class":110},"    to",[69,619,620],{"class":79},"   { ",[69,622,574],{"class":110},[69,624,114],{"class":79},[69,626,198],{"class":110},[69,628,411],{"class":79},[69,630,584],{"class":110},[69,632,114],{"class":79},[69,634,589],{"class":110},[69,636,592],{"class":79},[69,638,579],{"class":110},[69,640,600],{"class":79},[69,642,603],{"class":110},[69,644,592],{"class":79},[69,646,198],{"class":110},[69,648,611],{"class":79},[69,650,652],{"class":71,"line":651},16,[69,653,125],{"class":79},[69,655,657,659,662],{"class":71,"line":656},17,[69,658,556],{"class":75},[69,660,661],{"class":559}," vt-sink",[69,663,563],{"class":79},[69,665,667,669,671,673,675,677,679,681,683,685,687,689,691,693,695,697],{"class":71,"line":666},18,[69,668,569],{"class":110},[69,670,394],{"class":79},[69,672,574],{"class":110},[69,674,114],{"class":79},[69,676,198],{"class":110},[69,678,411],{"class":79},[69,680,584],{"class":110},[69,682,114],{"class":79},[69,684,589],{"class":110},[69,686,592],{"class":79},[69,688,579],{"class":110},[69,690,600],{"class":79},[69,692,603],{"class":110},[69,694,592],{"class":79},[69,696,198],{"class":110},[69,698,611],{"class":79},[69,700,702,704,706,708,710,712,714,716,718,720,722,725,727,729,731,733,736],{"class":71,"line":701},19,[69,703,617],{"class":110},[69,705,620],{"class":79},[69,707,574],{"class":110},[69,709,114],{"class":79},[69,711,579],{"class":110},[69,713,411],{"class":79},[69,715,584],{"class":110},[69,717,114],{"class":79},[69,719,589],{"class":110},[69,721,592],{"class":79},[69,723,724],{"class":110},"-16",[69,726,483],{"class":75},[69,728,600],{"class":79},[69,730,603],{"class":110},[69,732,592],{"class":79},[69,734,735],{"class":110},"0.98",[69,737,611],{"class":79},[69,739,741],{"class":71,"line":740},20,[69,742,125],{"class":79},[69,744,746],{"class":71,"line":745},21,[69,747,538],{"emptyLinePlaceholder":537},[69,749,751,753,756],{"class":71,"line":750},22,[69,752,99],{"class":79},[69,754,755],{"class":89},"hero-shot",[69,757,104],{"class":79},[69,759,761,763,766,769,772,775,777,780,782,785,787,789,791,793,795,798],{"class":71,"line":760},23,[69,762,111],{"class":110},[69,764,765],{"class":79},": vt-rise ",[69,767,768],{"class":110},"420",[69,770,771],{"class":75},"ms",[69,773,774],{"class":110}," cubic-bezier",[69,776,592],{"class":79},[69,778,779],{"class":110},"0.32",[69,781,405],{"class":79},[69,783,784],{"class":110},"0.72",[69,786,405],{"class":79},[69,788,579],{"class":110},[69,790,405],{"class":79},[69,792,198],{"class":110},[69,794,600],{"class":79},[69,796,797],{"class":110},"both",[69,799,119],{"class":79},[69,801,803],{"class":71,"line":802},24,[69,804,125],{"class":79},[69,806,808,810,812],{"class":71,"line":807},25,[69,809,86],{"class":79},[69,811,755],{"class":89},[69,813,104],{"class":79},[69,815,817,819,822,824,826,828,830,832,834,836,838,840,842,844,846,848],{"class":71,"line":816},26,[69,818,111],{"class":110},[69,820,821],{"class":79},": vt-sink ",[69,823,768],{"class":110},[69,825,771],{"class":75},[69,827,774],{"class":110},[69,829,592],{"class":79},[69,831,779],{"class":110},[69,833,405],{"class":79},[69,835,784],{"class":110},[69,837,405],{"class":79},[69,839,579],{"class":110},[69,841,405],{"class":79},[69,843,198],{"class":110},[69,845,600],{"class":79},[69,847,797],{"class":110},[69,849,119],{"class":79},[69,851,853],{"class":71,"line":852},27,[69,854,125],{"class":79},[69,856,858,861,863],{"class":71,"line":857},28,[69,859,860],{"class":79},"  ::view-transition-group(",[69,862,755],{"class":89},[69,864,104],{"class":79},[69,866,868,871,873,875,877],{"class":71,"line":867},29,[69,869,870],{"class":110},"    animation-duration",[69,872,114],{"class":79},[69,874,768],{"class":110},[69,876,771],{"class":75},[69,878,119],{"class":79},[69,880,882,885,887,890,892,894,896,898,900,902,904,906],{"class":71,"line":881},30,[69,883,884],{"class":110},"    animation-timing-function",[69,886,114],{"class":79},[69,888,889],{"class":110},"cubic-bezier",[69,891,592],{"class":79},[69,893,779],{"class":110},[69,895,405],{"class":79},[69,897,784],{"class":110},[69,899,405],{"class":79},[69,901,579],{"class":110},[69,903,405],{"class":79},[69,905,198],{"class":110},[69,907,908],{"class":79},");\n",[69,910,912],{"class":71,"line":911},31,[69,913,125],{"class":79},[69,915,917],{"class":71,"line":916},32,[69,918,538],{"emptyLinePlaceholder":537},[69,920,922],{"class":71,"line":921},33,[69,923,924],{"class":544},"  \u002F* ---- Reduced-motion design (the substitute) ---------------------- *\u002F\n",[69,926,928],{"class":71,"line":927},34,[69,929,538],{"emptyLinePlaceholder":537},[69,931,933,936],{"class":71,"line":932},35,[69,934,935],{"class":75},"  @media",[69,937,80],{"class":79},[69,939,941],{"class":71,"line":940},36,[69,942,943],{"class":544},"    \u002F* 1. Replace the travelling keyframes with a pure opacity pair.\n",[69,945,947],{"class":71,"line":946},37,[69,948,949],{"class":544},"          Explicit keyframes, NOT 'animation: none' — cancelling here\n",[69,951,953],{"class":71,"line":952},38,[69,954,955],{"class":544},"          leaves the snapshot to jump between two geometries. *\u002F\n",[69,957,959,962,965,968,971,973,975,977,979,982,985,987,989,991,993],{"class":71,"line":958},39,[69,960,961],{"class":75},"    @keyframes",[69,963,964],{"class":559}," vt-fade-in",[69,966,967],{"class":79},"  { ",[69,969,970],{"class":110},"from",[69,972,394],{"class":79},[69,974,574],{"class":110},[69,976,114],{"class":79},[69,978,579],{"class":110},[69,980,981],{"class":79},"; } ",[69,983,984],{"class":110},"to",[69,986,394],{"class":79},[69,988,574],{"class":110},[69,990,114],{"class":79},[69,992,198],{"class":110},[69,994,995],{"class":79},"; } }\n",[69,997,999,1001,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024,1026,1028],{"class":71,"line":998},40,[69,1000,961],{"class":75},[69,1002,1003],{"class":559}," vt-fade-out",[69,1005,394],{"class":79},[69,1007,970],{"class":110},[69,1009,394],{"class":79},[69,1011,574],{"class":110},[69,1013,114],{"class":79},[69,1015,198],{"class":110},[69,1017,981],{"class":79},[69,1019,984],{"class":110},[69,1021,394],{"class":79},[69,1023,574],{"class":110},[69,1025,114],{"class":79},[69,1027,579],{"class":110},[69,1029,995],{"class":79},[69,1031,1033],{"class":71,"line":1032},41,[69,1034,538],{"emptyLinePlaceholder":537},[69,1036,1038,1041,1043],{"class":71,"line":1037},42,[69,1039,1040],{"class":79},"    ::view-transition-new(",[69,1042,90],{"class":89},[69,1044,104],{"class":79},[69,1046,1048,1051,1054,1057,1059,1062,1065],{"class":71,"line":1047},43,[69,1049,1050],{"class":110},"      animation",[69,1052,1053],{"class":79},": vt-fade-in ",[69,1055,1056],{"class":110},"160",[69,1058,771],{"class":75},[69,1060,1061],{"class":110}," linear",[69,1063,1064],{"class":110}," both",[69,1066,119],{"class":79},[69,1068,1070],{"class":71,"line":1069},44,[69,1071,1072],{"class":79},"    }\n",[69,1074,1076,1079,1081],{"class":71,"line":1075},45,[69,1077,1078],{"class":79},"    ::view-transition-old(",[69,1080,90],{"class":89},[69,1082,104],{"class":79},[69,1084,1086,1088,1091,1093,1095,1097,1099],{"class":71,"line":1085},46,[69,1087,1050],{"class":110},[69,1089,1090],{"class":79},": vt-fade-out ",[69,1092,1056],{"class":110},[69,1094,771],{"class":75},[69,1096,1061],{"class":110},[69,1098,1064],{"class":110},[69,1100,119],{"class":79},[69,1102,1104],{"class":71,"line":1103},47,[69,1105,1072],{"class":79},[69,1107,1109],{"class":71,"line":1108},48,[69,1110,538],{"emptyLinePlaceholder":537},[69,1112,1114],{"class":71,"line":1113},49,[69,1115,1116],{"class":544},"    \u002F* 2. Collapse the group's geometry animation. Duration 0 makes the\n",[69,1118,1120],{"class":71,"line":1119},50,[69,1121,1122],{"class":544},"          box adopt its final rectangle immediately, so the fade happens\n",[69,1124,1126],{"class":71,"line":1125},51,[69,1127,1128],{"class":544},"          in place at the destination size instead of gliding into it. *\u002F\n",[69,1130,1132,1135,1137],{"class":71,"line":1131},52,[69,1133,1134],{"class":79},"    ::view-transition-group(",[69,1136,90],{"class":89},[69,1138,104],{"class":79},[69,1140,1142,1145,1147,1149,1152],{"class":71,"line":1141},53,[69,1143,1144],{"class":110},"      animation-duration",[69,1146,114],{"class":79},[69,1148,579],{"class":110},[69,1150,1151],{"class":75},"s",[69,1153,119],{"class":79},[69,1155,1157],{"class":71,"line":1156},54,[69,1158,1072],{"class":79},[69,1160,1162],{"class":71,"line":1161},55,[69,1163,538],{"emptyLinePlaceholder":537},[69,1165,1167],{"class":71,"line":1166},56,[69,1168,1169],{"class":544},"    \u002F* 3. Keep an opaque backdrop so the in-place fade never shows the\n",[69,1171,1173],{"class":71,"line":1172},57,[69,1174,1175],{"class":544},"          live DOM through two semi-transparent snapshots. *\u002F\n",[69,1177,1179,1182,1185,1187,1190],{"class":71,"line":1178},58,[69,1180,1181],{"class":79},"    ::",[69,1183,1184],{"class":89},"view-transition",[69,1186,394],{"class":79},[69,1188,1189],{"class":110},"background-color",[69,1191,1192],{"class":79},": Canvas; }\n",[69,1194,1196],{"class":71,"line":1195},59,[69,1197,125],{"class":79},[69,1199,1201,1204,1206],{"class":71,"line":1200},60,[69,1202,1203],{"class":79},"\u003C\u002F",[69,1205,383],{"class":89},[69,1207,318],{"class":79},[69,1209,1211,1213,1215],{"class":71,"line":1210},61,[69,1212,1203],{"class":79},[69,1214,344],{"class":89},[69,1216,318],{"class":79},[69,1218,1220,1222,1225],{"class":71,"line":1219},62,[69,1221,323],{"class":79},[69,1223,1224],{"class":89},"body",[69,1226,318],{"class":79},[69,1228,1230],{"class":71,"line":1229},63,[69,1231,538],{"emptyLinePlaceholder":537},[69,1233,1235,1237,1239,1242,1244,1247,1250,1252,1254,1257,1259,1262,1265,1267,1270],{"class":71,"line":1234},64,[69,1236,323],{"class":79},[69,1238,157],{"class":89},[69,1240,1241],{"class":110}," class",[69,1243,331],{"class":79},[69,1245,1246],{"class":334},"\"hero\"",[69,1248,1249],{"class":110}," id",[69,1251,331],{"class":79},[69,1253,1246],{"class":334},[69,1255,1256],{"class":110}," src",[69,1258,331],{"class":79},[69,1260,1261],{"class":334},"\"\u002Fimg\u002F7.jpg\"",[69,1263,1264],{"class":110}," alt",[69,1266,331],{"class":79},[69,1268,1269],{"class":334},"\"Coastal path\"",[69,1271,318],{"class":79},[69,1273,1275,1277,1280,1282,1284,1287,1289,1291,1293,1296,1298,1301,1303,1306,1308],{"class":71,"line":1274},65,[69,1276,323],{"class":79},[69,1278,1279],{"class":89},"div",[69,1281,1241],{"class":110},[69,1283,331],{"class":79},[69,1285,1286],{"class":334},"\"panel\"",[69,1288,1249],{"class":110},[69,1290,331],{"class":79},[69,1292,1286],{"class":334},[69,1294,1295],{"class":79},">\u003C",[69,1297,14],{"class":89},[69,1299,1300],{"class":79},">Coastal path, north shore.\u003C\u002F",[69,1302,14],{"class":89},[69,1304,1305],{"class":79},">\u003C\u002F",[69,1307,1279],{"class":89},[69,1309,318],{"class":79},[69,1311,1313,1315,1318,1321,1323,1326,1328,1330,1333,1336,1338],{"class":71,"line":1312},66,[69,1314,323],{"class":79},[69,1316,1317],{"class":89},"button",[69,1319,1320],{"class":110}," type",[69,1322,331],{"class":79},[69,1324,1325],{"class":334},"\"button\"",[69,1327,1249],{"class":110},[69,1329,331],{"class":79},[69,1331,1332],{"class":334},"\"next\"",[69,1334,1335],{"class":79},">Next photo\u003C\u002F",[69,1337,1317],{"class":89},[69,1339,318],{"class":79},[69,1341,1343],{"class":71,"line":1342},67,[69,1344,538],{"emptyLinePlaceholder":537},[69,1346,1348,1350,1353],{"class":71,"line":1347},68,[69,1349,323],{"class":79},[69,1351,1352],{"class":89},"script",[69,1354,318],{"class":79},[69,1356,1358,1361,1364,1367,1370,1374,1376,1379],{"class":71,"line":1357},69,[69,1359,1360],{"class":75},"  const",[69,1362,1363],{"class":110}," hero",[69,1365,1366],{"class":75}," =",[69,1368,1369],{"class":79}," document.",[69,1371,1373],{"class":1372},"sKwhi","getElementById",[69,1375,592],{"class":79},[69,1377,1378],{"class":334},"'hero'",[69,1380,908],{"class":79},[69,1382,1384,1386,1389,1391,1393,1395,1397,1400],{"class":71,"line":1383},70,[69,1385,1360],{"class":75},[69,1387,1388],{"class":110}," panel",[69,1390,1366],{"class":75},[69,1392,1369],{"class":79},[69,1394,1373],{"class":1372},[69,1396,592],{"class":79},[69,1398,1399],{"class":334},"'panel'",[69,1401,908],{"class":79},[69,1403,1405,1407,1410,1412],{"class":71,"line":1404},71,[69,1406,1360],{"class":75},[69,1408,1409],{"class":110}," shots",[69,1411,1366],{"class":75},[69,1413,1414],{"class":79}," [\n",[69,1416,1418,1421,1424,1427,1430,1433,1436],{"class":71,"line":1417},72,[69,1419,1420],{"class":79},"    { src: ",[69,1422,1423],{"class":334},"'\u002Fimg\u002F7.jpg'",[69,1425,1426],{"class":79},",  alt: ",[69,1428,1429],{"class":334},"'Coastal path'",[69,1431,1432],{"class":79},",    text: ",[69,1434,1435],{"class":334},"'Coastal path, north shore.'",[69,1437,1438],{"class":79}," },\n",[69,1440,1442,1444,1447,1450,1453,1456,1459],{"class":71,"line":1441},73,[69,1443,1420],{"class":79},[69,1445,1446],{"class":334},"'\u002Fimg\u002F12.jpg'",[69,1448,1449],{"class":79},", alt: ",[69,1451,1452],{"class":334},"'Harbour at dusk'",[69,1454,1455],{"class":79},", text: ",[69,1457,1458],{"class":334},"'Harbour at dusk, low tide.'",[69,1460,1461],{"class":79}," }\n",[69,1463,1465],{"class":71,"line":1464},74,[69,1466,1467],{"class":79},"  ];\n",[69,1469,1471,1474,1477,1479,1482],{"class":71,"line":1470},75,[69,1472,1473],{"class":75},"  let",[69,1475,1476],{"class":79}," i ",[69,1478,331],{"class":75},[69,1480,1481],{"class":110}," 0",[69,1483,119],{"class":79},[69,1485,1487],{"class":71,"line":1486},76,[69,1488,538],{"emptyLinePlaceholder":537},[69,1490,1492,1495,1498],{"class":71,"line":1491},77,[69,1493,1494],{"class":75},"  function",[69,1496,1497],{"class":1372}," swap",[69,1499,1500],{"class":79},"() {\n",[69,1502,1504,1507,1509,1512,1515,1518,1520,1522,1525,1528],{"class":71,"line":1503},78,[69,1505,1506],{"class":79},"    i ",[69,1508,331],{"class":75},[69,1510,1511],{"class":79}," (i ",[69,1513,1514],{"class":75},"+",[69,1516,1517],{"class":110}," 1",[69,1519,600],{"class":79},[69,1521,444],{"class":75},[69,1523,1524],{"class":79}," shots.",[69,1526,1527],{"class":110},"length",[69,1529,119],{"class":79},[69,1531,1533,1536,1538],{"class":71,"line":1532},79,[69,1534,1535],{"class":79},"    hero.src ",[69,1537,331],{"class":75},[69,1539,1540],{"class":79}," shots[i].src;\n",[69,1542,1544,1547,1549],{"class":71,"line":1543},80,[69,1545,1546],{"class":79},"    hero.alt ",[69,1548,331],{"class":75},[69,1550,1551],{"class":79}," shots[i].alt;\n",[69,1553,1555,1558,1560,1563,1566,1569,1571,1574],{"class":71,"line":1554},81,[69,1556,1557],{"class":79},"    panel.innerHTML ",[69,1559,331],{"class":75},[69,1561,1562],{"class":334}," '\u003Cp>'",[69,1564,1565],{"class":75}," +",[69,1567,1568],{"class":79}," shots[i].text ",[69,1570,1514],{"class":75},[69,1572,1573],{"class":334}," '\u003C\u002Fp>'",[69,1575,119],{"class":79},[69,1577,1579],{"class":71,"line":1578},82,[69,1580,125],{"class":79},[69,1582,1584],{"class":71,"line":1583},83,[69,1585,538],{"emptyLinePlaceholder":537},[69,1587,1589,1592,1594,1596,1599,1602,1605,1607,1610,1613,1616],{"class":71,"line":1588},84,[69,1590,1591],{"class":79},"  document.",[69,1593,1373],{"class":1372},[69,1595,592],{"class":79},[69,1597,1598],{"class":334},"'next'",[69,1600,1601],{"class":79},").",[69,1603,1604],{"class":1372},"addEventListener",[69,1606,592],{"class":79},[69,1608,1609],{"class":334},"'click'",[69,1611,1612],{"class":79},", () ",[69,1614,1615],{"class":75},"=>",[69,1617,563],{"class":79},[69,1619,1621,1624,1626,1629],{"class":71,"line":1620},85,[69,1622,1623],{"class":79},"    hero.style.viewTransitionName ",[69,1625,331],{"class":75},[69,1627,1628],{"class":334}," 'hero-shot'",[69,1630,119],{"class":79},[69,1632,1634,1637,1640,1643,1646,1649,1652,1655],{"class":71,"line":1633},86,[69,1635,1636],{"class":75},"    if",[69,1638,1639],{"class":79}," (",[69,1641,1642],{"class":75},"!",[69,1644,1645],{"class":79},"document.startViewTransition) { ",[69,1647,1648],{"class":1372},"swap",[69,1650,1651],{"class":79},"(); ",[69,1653,1654],{"class":75},"return",[69,1656,425],{"class":79},[69,1658,1660,1663,1666],{"class":71,"line":1659},87,[69,1661,1662],{"class":79},"    document.",[69,1664,1665],{"class":1372},"startViewTransition",[69,1667,1668],{"class":79},"(swap).finished\n",[69,1670,1672,1675,1678,1681,1683,1686,1688,1691],{"class":71,"line":1671},88,[69,1673,1674],{"class":79},"      .",[69,1676,1677],{"class":1372},"then",[69,1679,1680],{"class":79},"(() ",[69,1682,1615],{"class":75},[69,1684,1685],{"class":79}," { hero.style.viewTransitionName ",[69,1687,331],{"class":75},[69,1689,1690],{"class":334}," ''",[69,1692,1693],{"class":79},"; });\n",[69,1695,1697],{"class":71,"line":1696},89,[69,1698,1699],{"class":79},"  });\n",[69,1701,1703,1705,1707],{"class":71,"line":1702},90,[69,1704,1203],{"class":79},[69,1706,1352],{"class":89},[69,1708,318],{"class":79},[69,1710,1712],{"class":71,"line":1711},91,[69,1713,538],{"emptyLinePlaceholder":537},[69,1715,1717,1719,1721],{"class":71,"line":1716},92,[69,1718,1203],{"class":79},[69,1720,1224],{"class":89},[69,1722,318],{"class":79},[69,1724,1726,1728,1730],{"class":71,"line":1725},93,[69,1727,1203],{"class":79},[69,1729,302],{"class":89},[69,1731,318],{"class":79},[14,1733,1734],{},"Everything that makes this correct is in the media query, and it is entirely declarative — no branching in the click handler at all. The transition still runs for reduced-motion users; it simply looks different.",[41,1736],{},[44,1738,1740],{"id":1739},"the-key-technique-zeroing-the-group-not-the-snapshots","The key technique: zeroing the group, not the snapshots",[14,1742,1743,1744,1747],{},"The line doing the real work is ",[18,1745,1746],{},"::view-transition-group(*) { animation-duration: 0s; }",".",[14,1749,1750,1751,405,1753,1756,1757,1759,1760,1763],{},"A group carries a generated animation interpolating ",[18,1752,436],{},[18,1754,1755],{},"height",", and ",[18,1758,584],{}," between the two measured rectangles. That animation is the ",[27,1761,1762],{},"only"," source of travel and scaling in a shared-element morph — the snapshots inside it never move on their own unless you tell them to. Setting its duration to zero makes the group adopt its final geometry on the first frame, which sounds like the same snap described earlier but is not, for one reason: the snapshots inside it are still cross-fading. The old image fades out at the destination size while the new one fades in, so there is no moment where a fully opaque object is seen in two different places.",[14,1765,1766,1767,1769,1770,1774],{},"Contrast that with ",[18,1768,50],{}," on the snapshots, which leaves the group animating and the images opaque. The distinction is exact: ",[1771,1772,1773],"strong",{},"zero the geometry and keep the opacity",", never the other way round. Getting this backwards is the single most common reduced-motion bug in view-transition code, and it is invisible unless you test with the preference actually enabled.",[14,1776,1777,1778,1782,1783,1747],{},"The 160ms fade duration is deliberately shorter than the 420ms morph. Once there is no distance to cover, a long fade is just latency; the shorter span reads as responsive while still being long enough to register as a transition rather than a cut. The reasoning generalises across all motion work — see ",[32,1779,1781],{"href":1780},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Freducing-motion-preferences-in-css\u002F","reducing motion preferences in CSS"," and the catalogue in ",[32,1784,1786],{"href":1785},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes\u002F","prefers-reduced-motion recipes",[41,1788],{},[44,1790,1792],{"id":1791},"variation-skipping-the-transition-outright","Variation: skipping the transition outright",[14,1794,1795],{},"Sometimes a fade is still too much — a data-dense table view where the transition adds nothing, or a page where the transition exists purely for delight. Because the preference is readable from script, you can decline to start the transition at all:",[60,1797,1801],{"className":1798,"code":1799,"language":1800,"meta":65,"style":65},"language-js shiki shiki-themes github-light-high-contrast github-dark-high-contrast","const wantsLessMotion =\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nfunction run(mutate) {\n  if (wantsLessMotion || !document.startViewTransition) {\n    mutate();\n    return;\n  }\n  document.startViewTransition(mutate);\n}\n","js",[18,1802,1803,1814,1830,1834,1849,1866,1874,1881,1885,1894],{"__ignoreMap":65},[69,1804,1805,1808,1811],{"class":71,"line":72},[69,1806,1807],{"class":75},"const",[69,1809,1810],{"class":110}," wantsLessMotion",[69,1812,1813],{"class":75}," =\n",[69,1815,1816,1819,1822,1824,1827],{"class":71,"line":83},[69,1817,1818],{"class":79},"  window.",[69,1820,1821],{"class":1372},"matchMedia",[69,1823,592],{"class":79},[69,1825,1826],{"class":334},"'(prefers-reduced-motion: reduce)'",[69,1828,1829],{"class":79},").matches;\n",[69,1831,1832],{"class":71,"line":96},[69,1833,538],{"emptyLinePlaceholder":537},[69,1835,1836,1839,1842,1844,1847],{"class":71,"line":107},[69,1837,1838],{"class":75},"function",[69,1840,1841],{"class":1372}," run",[69,1843,592],{"class":79},[69,1845,1846],{"class":559},"mutate",[69,1848,104],{"class":79},[69,1850,1851,1854,1857,1860,1863],{"class":71,"line":122},[69,1852,1853],{"class":75},"  if",[69,1855,1856],{"class":79}," (wantsLessMotion ",[69,1858,1859],{"class":75},"||",[69,1861,1862],{"class":75}," !",[69,1864,1865],{"class":79},"document.startViewTransition) {\n",[69,1867,1868,1871],{"class":71,"line":128},[69,1869,1870],{"class":1372},"    mutate",[69,1872,1873],{"class":79},"();\n",[69,1875,1876,1879],{"class":71,"line":388},[69,1877,1878],{"class":75},"    return",[69,1880,119],{"class":79},[69,1882,1883],{"class":71,"line":428},[69,1884,125],{"class":79},[69,1886,1887,1889,1891],{"class":71,"line":488},[69,1888,1591],{"class":79},[69,1890,1665],{"class":1372},[69,1892,1893],{"class":79},"(mutate);\n",[69,1895,1896],{"class":71,"line":534},[69,1897,131],{"class":79},[14,1899,1900,1901,1903,1904,1907,1908,1911],{},"No capture happens, no overlay is created, and there is nothing to snap. This is a genuinely valid option — an instant content change is not a motion problem — but it forfeits the continuity cue entirely, so prefer it for utilitarian views and keep the cross-fade for anything where the user needs to understand that one thing became another. Note that ",[18,1902,1821],{}," is read once here; if you support users toggling the preference mid-session, read ",[18,1905,1906],{},".matches"," inside ",[18,1909,1910],{},"run()"," instead.",[14,1913,1914,1915,1919,1920,1924],{},"For the broader question of which motion warrants an alternative at all, ",[32,1916,1918],{"href":1917},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns\u002F","vestibular-safe animation patterns"," covers the physiology, and ",[32,1921,1923],{"href":1922},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria\u002F","WCAG motion success criteria"," covers the conformance requirements a large-area morph has to meet.",[41,1926],{},[44,1928,1930],{"id":1929},"browser-support-note","Browser support note",[14,1932,1933,1935],{},[18,1934,20],{}," has been supported for years across Chrome, Edge, Firefox, and Safari, so the media query itself is safe everywhere. The pseudo-element rules inside it only apply where view transitions exist at all — Chrome and Edge 111+, Safari 18+, and Firefox 144+, which is every current engine. That means the reduced-motion override is not a niche branch: it now runs for essentially every user who has the preference set, so it has to be correct rather than merely present. On anything older than those versions both the transition and the override are absent, and the user gets the instant DOM change that the reduced-motion path was approximating anyway.",[14,1937,1938],{},"Test this properly rather than trusting the code. Chrome DevTools exposes the preference under Rendering → \"Emulate CSS media feature prefers-reduced-motion\", and Safari has the equivalent in the Web Inspector's appearance controls. Toggle it on, trigger the transition, and slow the Animations panel to 25% — a lingering geometry animation is obvious at that speed and nearly invisible at full rate.",[41,1940],{},[44,1942,1944],{"id":1943},"faq","FAQ",[14,1946,1947,1950],{},[1771,1948,1949],{},"Why is animation: none the wrong reduced-motion override for a view transition?","\nIt cancels the animation but not the transition. The overlay is still built and the group still has to reconcile two different rectangles, so the snapshot jumps between them in a single frame, which is more startling than the motion it replaced.",[14,1952,1953,1956],{},[1771,1954,1955],{},"Should a reduced-motion preference disable view transitions completely?","\nUsually not. The preference asks for less movement, not less feedback. A short cross-fade keeps the sense of continuity between two states while removing all travel, scaling, and rotation.",[14,1958,1959,1962,1963,1966,1967,1970],{},[1771,1960,1961],{},"How do I skip a view transition entirely when I do want to?","\nCheck the preference in script with ",[18,1964,1965],{},"window.matchMedia"," and call the DOM-mutating function directly instead of passing it to ",[18,1968,1969],{},"document.startViewTransition",". No overlay is created, so there is nothing to animate or snap.",[14,1972,1973,1976],{},[1771,1974,1975],{},"Does prefers-reduced-motion cover the whole transition or just my custom keyframes?","\nA media query in your stylesheet only affects rules you wrote. The user-agent default animations on the snapshots and the generated group animation still run unless your rules override them.",[41,1978],{},[44,1980,1982],{"id":1981},"related","Related",[1984,1985,1986,1992,1999,2006,2012],"ul",{},[1987,1988,1989,1991],"li",{},[32,1990,35],{"href":34}," — the parent guide on the snapshot model and pseudo-element tree.",[1987,1993,1994,1998],{},[32,1995,1997],{"href":1996},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-names-shared-elements\u002F","View transition names and shared elements"," — the morph whose geometry animation this page neutralises.",[1987,2000,2001,2005],{},[32,2002,2004],{"href":2003},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fsame-document-view-transitions\u002F","Same-document view transitions"," — the full-motion keyframes being substituted here.",[1987,2007,2008,2011],{},[32,2009,2010],{"href":1917},"Vestibular-safe animation patterns"," — why large-area travel is the specific thing to remove.",[1987,2013,2014,2018],{},[32,2015,2017],{"href":2016},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom\u002F","Fluid type accessibility and zoom"," — the same substitute-don't-subtract principle applied to responsive text.",[383,2020,2021],{},"html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}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 .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 .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sLBg1, html code.shiki .sLBg1{--shiki-default:#66707B;--shiki-dark:#BDC4CC}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}",{"title":65,"searchDepth":83,"depth":83,"links":2023},[2024,2026,2027,2028,2029,2030,2031,2032],{"id":46,"depth":83,"text":2025},"Why animation: none is the wrong instinct",{"id":277,"depth":83,"text":278},{"id":293,"depth":83,"text":294},{"id":1739,"depth":83,"text":1740},{"id":1791,"depth":83,"text":1792},{"id":1929,"depth":83,"text":1930},{"id":1943,"depth":83,"text":1944},{"id":1981,"depth":83,"text":1982},"Honour prefers-reduced-motion in view transitions by replacing travel with a cross-fade, and learn why animation: none on the snapshots leaves a jarring snap.","md",{"pageTitle":2036,"datePublished":2037,"dateModified":2037,"faq":2038},"View Transitions & Reduced Motion","2026-07-20",[2039,2041,2043,2045],{"q":1949,"a":2040},"It cancels the animation but not the transition. The overlay is still built and the group still has to reconcile two different rectangles, so the snapshot jumps between them in a single frame, which is more startling than the motion it replaced.",{"q":1955,"a":2042},"Usually not. The preference asks for less movement, not less feedback. A short cross-fade keeps the sense of continuity between two states while removing all travel, scaling, and rotation.",{"q":1961,"a":2044},"Check the preference in script with window.matchMedia and call the DOM-mutating function directly instead of passing it to document.startViewTransition. No overlay is created, so there is nothing to animate or snap.",{"q":1975,"a":2046},"A media query in your stylesheet only affects rules you wrote. The user-agent default animations on the snapshots and the generated group animation still run unless your rules override them.","\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion",{"title":5,"description":2033},"css-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion\u002Findex","Fh3Pq9FQcdAlttGKa-fLIuafapMWHVcdOirn9ezdqqw",[2052,2055,2058,2061,2064,2067,2070,2073,2076,2079,2082,2085,2088,2091,2094,2097,2100,2103,2106,2109,2112,2115,2118,2121,2124,2127,2130,2133,2136,2139,2142,2145,2148,2151,2154,2157,2160,2163,2166,2169,2172,2175,2178,2181,2184,2187,2188,2191,2194,2197,2200,2203,2206,2209,2212,2215,2218,2221,2224,2227,2230,2233,2236,2239,2242,2245,2248,2251,2254,2257,2260,2263,2266,2269,2272,2275,2278,2281,2284,2287,2290,2293,2296,2299,2302,2305,2308,2311],{"path":2053,"title":2054},"\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":2056,"title":2057},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":2059,"title":2060},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":2062,"title":2063},"\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":2065,"title":2066},"\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":2068,"title":2069},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":2071,"title":2072},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":2074,"title":2075},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2077,"title":2078},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2080,"title":2081},"\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":2083,"title":2084},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2086,"title":2087},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2089,"title":2090},"\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":2092,"title":2093},"\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":2095,"title":2096},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2098,"title":2099},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2101,"title":2102},"\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":2104,"title":2105},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2107,"title":2108},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2110,"title":2111},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2113,"title":2114},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2116,"title":2117},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2119,"title":2120},"\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":2122,"title":2123},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":2125,"title":2126},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2128,"title":2129},"\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":2131,"title":2132},"\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":2134,"title":2135},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2137,"title":2138},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2140,"title":2141},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2143,"title":2144},"\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":2146,"title":2147},"\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":2149,"title":2150},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2152,"title":2153},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2155,"title":2156},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2158,"title":2159},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2161,"title":2162},"\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":2164,"title":2165},"\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":2167,"title":2168},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2170,"title":2171},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2173,"title":2174},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2176,"title":2177},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2179,"title":2180},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2182,"title":2183},"\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":2185,"title":2186},"\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":2047,"title":5},{"path":2189,"title":2190},"\u002F","Modern CSS Layouts & Micro-Interactions",{"path":2192,"title":2193},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2195,"title":2196},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2198,"title":2199},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2201,"title":2202},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2204,"title":2205},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2207,"title":2208},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2210,"title":2211},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2213,"title":2214},"\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":2216,"title":2217},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2219,"title":2220},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2222,"title":2223},"\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":2225,"title":2226},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2228,"title":2229},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2231,"title":2232},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2234,"title":2235},"\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":2237,"title":2238},"\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":2240,"title":2241},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2243,"title":2244},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2246,"title":2247},"\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":2249,"title":2250},"\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":2252,"title":2253},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2255,"title":2256},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2258,"title":2259},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2261,"title":2262},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":2264,"title":2265},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2267,"title":2268},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2270,"title":2271},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2273,"title":2274},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2276,"title":2277},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2279,"title":2280},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2282,"title":2283},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2285,"title":2286},"\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":2288,"title":2289},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2291,"title":2292},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2294,"title":2295},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2297,"title":2298},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2300,"title":2301},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2303,"title":2304},"\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":2306,"title":2307},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2309,"title":2310},"\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":2312,"title":2313},"\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",1784566157457]