[{"data":1,"prerenderedAt":2500},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay\u002F":3,"content-all-pages":1935,"live-demo:hover-intent-menu":2494},{"id":4,"title":5,"body":6,"description":1917,"extension":1918,"meta":1919,"navigation":382,"path":1931,"seo":1932,"stem":1933,"__hash__":1934},"content\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay\u002Findex.md","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"type":7,"value":8,"toc":1906},"minimark",[9,19,42,47,50,53,56,60,184,187,191,195,1675,1695,1699,1714,1781,1784,1788,1791,1794,1797,1801,1812,1816,1831,1835,1842,1851,1857,1872,1876,1903],[10,11,13,14,18],"h1",{"id":12},"hover-intent-delays-with-transition-delay-menus-that-dont-flicker","Hover Intent Delays With ",[15,16,17],"code",{},"transition-delay",": Menus That Don't Flicker",[20,21,22,23,27,28,30,31,36,37,41],"p",{},"Move a pointer across a navigation bar with hover-triggered dropdowns and every menu on the path flashes open and shut. Move it diagonally from a top-level item toward the third entry of its submenu and the path clips a neighbouring item, whose menu instantly replaces the one you were heading for. Both problems come from reacting to hover too literally: the browser reports the pointer's position every frame, and a menu that opens and closes on every report behaves like a nervous machine rather than a considerate interface. The narrow fix this page teaches is ",[24,25,26],"em",{},"hover intent"," in pure CSS — short, asymmetric delays built from ",[15,29,17],{}," that ignore passing pointers, tolerate imprecise movement, and never slow down keyboard users. It belongs to ",[32,33,35],"a",{"href":34},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002F","Hover & Focus State Design"," in the ",[32,38,40],{"href":39},"\u002Fcss-only-micro-interactions-animations\u002F","CSS-Only Micro-Interactions & Animations"," guide.",[43,44,46],"h2",{"id":45},"why-reacting-instantly-to-hover-backfires","Why reacting instantly to hover backfires",[20,48,49],{},"Hover is a proxy for attention, and a poor one. A pointer crossing a menu bar on its way to the page content is not attending to any menu; it just happens to be there for 40 milliseconds. Opening a dropdown for each of those passes creates visual noise and, worse, can cover the content the user was reaching for.",[20,51,52],{},"The opposite problem is closing too eagerly. Submenus and mega menus sit beside or below their triggers, and the natural path from trigger to target is diagonal. That diagonal often crosses another trigger or a gap where no element is hovered, and an instant close destroys the menu the user was travelling toward. Desktop operating systems solved this decades ago with small delays and \"safe triangles\"; the web frequently forgets.",[20,54,55],{},"JavaScript hover-intent libraries measure pointer speed and direction. For most menus and tooltips a simpler rule works: wait a little before opening, and wait a little longer before closing. CSS can express exactly that with delays on the right states.",[43,57,59],{"id":58},"the-timeline-of-a-hover-with-intent-delays","The timeline of a hover with intent delays",[61,62,68,69,68,73,68,77,68,85,68,92,68,101,68,110,68,116,68,124,68,130,68,134,68,137,68,141,68,145,68,152,68,156,68,159,68,163,68,169,68,175,68,179],"svg",{"viewBox":63,"role":64,"ariaLabel":65,"xmlns":66,"style":67},"0 0 720 320","img","Timelines comparing a passing pointer, which never opens the menu, and a resting pointer, which opens it after the open delay and keeps it through a brief exit","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[70,71,72],"title",{},"Open delay filters passes; close delay forgives exits",[74,75,76],"desc",{},"Top row: the pointer is over the trigger for 60 milliseconds, shorter than the 150 millisecond open delay, so the menu never appears. Bottom row: the pointer rests for 400 milliseconds, the menu opens after 150, then the pointer leaves for 180 milliseconds, which is shorter than the 300 millisecond close delay, so the menu stays open.",[78,79,84],"text",{"textAnchor":80,"x":81,"y":82,"style":83},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Two pointers, same trigger",[78,86,91],{"textAnchor":87,"x":88,"y":89,"style":90},"start","30","72","text-anchor:start;fill:currentColor;font:600 12px sans-serif","passing",[93,94],"line",{"x1":95,"y1":96,"x2":97,"y2":96,"stroke":98,"strokeWidth":99,"opacity":100},"120","80","690","currentColor","1","0.4",[102,103],"rect",{"x":104,"y":105,"width":106,"height":107,"rx":108,"fill":98,"opacity":109},"140","62","40","18","3","0.35",[78,111,115],{"textAnchor":80,"x":112,"y":113,"style":114},"160","100","text-anchor:middle;fill:currentColor;font:11px sans-serif","hover 60ms",[117,118],"path",{"d":119,"stroke":120,"strokeWidth":121,"strokeDashArray":122},"M140 60 H290","#7aa2ff","2",[123,123],"4",[78,125,129],{"textAnchor":87,"x":126,"y":127,"style":128},"300","66","text-anchor:start;fill:currentColor;font:11px sans-serif","open delay 150ms never completes → no menu",[78,131,133],{"textAnchor":87,"x":88,"y":132,"style":90},"172","resting",[93,135],{"x1":95,"y1":136,"x2":97,"y2":136,"stroke":98,"strokeWidth":99,"opacity":100},"180",[102,138],{"x":104,"y":139,"width":140,"height":107,"rx":108,"fill":98,"opacity":109},"162","200",[78,142,144],{"textAnchor":80,"x":143,"y":140,"style":114},"240","hover",[102,146],{"x":147,"y":139,"width":148,"height":107,"rx":108,"fill":149,"stroke":98,"strokeDashArray":150,"opacity":151},"340","90","none",[108,108],"0.6",[78,153,155],{"textAnchor":80,"x":154,"y":140,"style":114},"385","away 180ms",[102,157],{"x":158,"y":139,"width":112,"height":107,"rx":108,"fill":98,"opacity":109},"430",[78,160,162],{"textAnchor":80,"x":161,"y":140,"style":114},"510","hover again",[102,164],{"x":165,"y":166,"width":167,"height":82,"rx":168,"fill":120,"opacity":100},"215","228","400","5",[78,170,174],{"textAnchor":80,"x":171,"y":172,"style":173},"415","246","text-anchor:middle;fill:currentColor;font:600 12px sans-serif","menu open: gap shorter than close delay",[78,176,178],{"textAnchor":80,"x":165,"y":177,"style":114},"276","+150ms",[78,180,183],{"textAnchor":80,"x":81,"y":181,"style":182},"306","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.8","Delays are cancelled, not queued: leaving before the delay ends means nothing happens.",[20,185,186],{},"The key behaviour is that a pending transition delay is cancelled if the state changes back before the delay elapses. A pointer that enters and leaves within 150 milliseconds starts an open transition that never begins, and the browser reverts to the closed state with nothing drawn. A pointer that leaves an open menu for less than the close delay starts a close transition that is cancelled on return. No timers, no state machine — the transition engine provides both behaviours.",[43,188,190],{"id":189},"the-complete-implementation","The complete implementation",[192,193],"live-demo",{"name":194},"hover-intent-menu",[196,197,202],"pre",{"className":198,"code":199,"language":200,"meta":201,"style":201},"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\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\u003Ctitle>Hover intent delays\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    --intent-open: 150ms;     \u002F* ignore pointers passing through *\u002F\n    --intent-close: 300ms;    \u002F* forgive diagonal trips to the menu *\u002F\n  }\n\n  body { font: 15px\u002F1.5 system-ui, sans-serif; margin: 1.5rem; }\n\n  .nav { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }\n  .nav > li { position: relative; }\n  .nav > li > a {\n    display: block;\n    padding: 0.5rem 0.9rem;\n    border-radius: 6px;\n    color: inherit;\n    text-decoration: none;\n  }\n\n  .submenu {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    min-width: 12rem;\n    margin: 0;\n    padding: 0.4rem;\n    list-style: none;\n    border: 1px solid #cbd5e1;\n    border-radius: 10px;\n    background: #ffffff;\n\n    \u002F* CLOSED. This transition runs when leaving the open state, so its\n       delay is the close delay. visibility waits for the fade to finish. *\u002F\n    opacity: 0;\n    visibility: hidden;\n    translate: 0 -0.25rem;\n    transition:\n      opacity 120ms ease-in var(--intent-close),\n      translate 120ms ease-in var(--intent-close),\n      visibility 0s linear calc(var(--intent-close) + 120ms);\n  }\n\n  \u002F* OPEN via hover: its transition runs when entering, so its delay is\n     the open delay. *\u002F\n  .nav > li:hover > .submenu {\n    opacity: 1;\n    visibility: visible;\n    translate: 0 0;\n    transition:\n      opacity 160ms ease-out var(--intent-open),\n      translate 160ms ease-out var(--intent-open),\n      visibility 0s linear var(--intent-open);\n  }\n\n  \u002F* OPEN via keyboard: no intent delay, focus is always deliberate. *\u002F\n  .nav > li:focus-within > .submenu {\n    opacity: 1;\n    visibility: visible;\n    translate: 0 0;\n    transition: opacity 160ms ease-out, translate 160ms ease-out, visibility 0s;\n  }\n\n  .submenu a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; color: inherit; text-decoration: none; }\n  .submenu a:hover, .submenu a:focus-visible, .nav > li > a:hover { background: #eef2ff; }\n  a:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }\n\n  @media (prefers-reduced-motion: reduce) {\n    .submenu, .nav > li:hover > .submenu { translate: 0 0; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cul class=\"nav\">\n    \u003Cli>\u003Ca href=\"\u002Fproducts\u002F\">Products\u003C\u002Fa>\n      \u003Cul class=\"submenu\">\u003Cli>\u003Ca href=\"\u002Fproducts\u002Fapi\u002F\">API\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"\u002Fproducts\u002Fcli\u002F\">CLI\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fdocs\u002F\">Docs\u003C\u002Fa>\n      \u003Cul class=\"submenu\">\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fstart\u002F\">Getting started\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"\u002Fdocs\u002Fref\u002F\">Reference\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"\u002Fpricing\u002F\">Pricing\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[15,203,204,223,243,253,271,296,310,320,329,353,371,377,384,435,440,497,520,536,550,570,585,598,610,615,620,628,641,656,668,683,695,708,720,740,754,767,772,778,784,796,809,826,835,860,880,920,925,930,936,942,961,972,984,998,1005,1026,1045,1064,1069,1074,1080,1098,1109,1120,1133,1165,1170,1175,1236,1282,1319,1324,1333,1366,1371,1381,1390,1400,1419,1448,1522,1547,1618,1647,1657,1666],{"__ignoreMap":201},[205,206,208,212,216,220],"span",{"class":93,"line":207},1,[205,209,211],{"class":210},"suds8","\u003C!",[205,213,215],{"class":214},"sne4z","doctype",[205,217,219],{"class":218},"s-5SL"," html",[205,221,222],{"class":210},">\n",[205,224,226,229,231,234,237,241],{"class":93,"line":225},2,[205,227,228],{"class":210},"\u003C",[205,230,200],{"class":214},[205,232,233],{"class":218}," lang",[205,235,236],{"class":210},"=",[205,238,240],{"class":239},"sT6z2","\"en\"",[205,242,222],{"class":210},[205,244,246,248,251],{"class":93,"line":245},3,[205,247,228],{"class":210},[205,249,250],{"class":214},"head",[205,252,222],{"class":210},[205,254,256,258,261,264,266,269],{"class":93,"line":255},4,[205,257,228],{"class":210},[205,259,260],{"class":214},"meta",[205,262,263],{"class":218}," charset",[205,265,236],{"class":210},[205,267,268],{"class":239},"\"utf-8\"",[205,270,222],{"class":210},[205,272,274,276,278,281,283,286,289,291,294],{"class":93,"line":273},5,[205,275,228],{"class":210},[205,277,260],{"class":214},[205,279,280],{"class":218}," name",[205,282,236],{"class":210},[205,284,285],{"class":239},"\"viewport\"",[205,287,288],{"class":218}," content",[205,290,236],{"class":210},[205,292,293],{"class":239},"\"width=device-width, initial-scale=1\"",[205,295,222],{"class":210},[205,297,299,301,303,306,308],{"class":93,"line":298},6,[205,300,228],{"class":210},[205,302,70],{"class":214},[205,304,305],{"class":210},">Hover intent delays\u003C\u002F",[205,307,70],{"class":214},[205,309,222],{"class":210},[205,311,313,315,318],{"class":93,"line":312},7,[205,314,228],{"class":210},[205,316,317],{"class":214},"style",[205,319,222],{"class":210},[205,321,323,326],{"class":93,"line":322},8,[205,324,325],{"class":218},"  :root",[205,327,328],{"class":210}," {\n",[205,330,332,336,339,342,346,349],{"class":93,"line":331},9,[205,333,335],{"class":334},"soyes","    --intent-open",[205,337,338],{"class":210},": ",[205,340,341],{"class":218},"150",[205,343,345],{"class":344},"sHUrx","ms",[205,347,348],{"class":210},";     ",[205,350,352],{"class":351},"sLBg1","\u002F* ignore pointers passing through *\u002F\n",[205,354,356,359,361,363,365,368],{"class":93,"line":355},10,[205,357,358],{"class":334},"    --intent-close",[205,360,338],{"class":210},[205,362,126],{"class":218},[205,364,345],{"class":344},[205,366,367],{"class":210},";    ",[205,369,370],{"class":351},"\u002F* forgive diagonal trips to the menu *\u002F\n",[205,372,374],{"class":93,"line":373},11,[205,375,376],{"class":210},"  }\n",[205,378,380],{"class":93,"line":379},12,[205,381,383],{"emptyLinePlaceholder":382},true,"\n",[205,385,387,390,393,396,398,401,404,407,410,413,416,419,422,425,427,429,432],{"class":93,"line":386},13,[205,388,389],{"class":214},"  body",[205,391,392],{"class":210}," { ",[205,394,395],{"class":218},"font",[205,397,338],{"class":210},[205,399,400],{"class":218},"15",[205,402,403],{"class":344},"px",[205,405,406],{"class":210},"\u002F",[205,408,409],{"class":218},"1.5",[205,411,412],{"class":218}," system-ui",[205,414,415],{"class":210},", ",[205,417,418],{"class":218},"sans-serif",[205,420,421],{"class":210},"; ",[205,423,424],{"class":218},"margin",[205,426,338],{"class":210},[205,428,409],{"class":218},[205,430,431],{"class":344},"rem",[205,433,434],{"class":210},"; }\n",[205,436,438],{"class":93,"line":437},14,[205,439,383],{"emptyLinePlaceholder":382},[205,441,443,446,448,451,453,456,458,461,463,466,468,470,472,474,477,479,482,484,486,488,491,493,495],{"class":93,"line":442},15,[205,444,445],{"class":218},"  .nav",[205,447,392],{"class":210},[205,449,450],{"class":218},"display",[205,452,338],{"class":210},[205,454,455],{"class":218},"flex",[205,457,421],{"class":210},[205,459,460],{"class":218},"gap",[205,462,338],{"class":210},[205,464,465],{"class":218},"0.25",[205,467,431],{"class":344},[205,469,421],{"class":210},[205,471,424],{"class":218},[205,473,338],{"class":210},[205,475,476],{"class":218},"0",[205,478,421],{"class":210},[205,480,481],{"class":218},"padding",[205,483,338],{"class":210},[205,485,476],{"class":218},[205,487,421],{"class":210},[205,489,490],{"class":218},"list-style",[205,492,338],{"class":210},[205,494,149],{"class":218},[205,496,434],{"class":210},[205,498,500,502,505,508,510,513,515,518],{"class":93,"line":499},16,[205,501,445],{"class":218},[205,503,504],{"class":344}," >",[205,506,507],{"class":214}," li",[205,509,392],{"class":210},[205,511,512],{"class":218},"position",[205,514,338],{"class":210},[205,516,517],{"class":218},"relative",[205,519,434],{"class":210},[205,521,523,525,527,529,531,534],{"class":93,"line":522},17,[205,524,445],{"class":218},[205,526,504],{"class":344},[205,528,507],{"class":214},[205,530,504],{"class":344},[205,532,533],{"class":214}," a",[205,535,328],{"class":210},[205,537,539,542,544,547],{"class":93,"line":538},18,[205,540,541],{"class":218},"    display",[205,543,338],{"class":210},[205,545,546],{"class":218},"block",[205,548,549],{"class":210},";\n",[205,551,553,556,558,561,563,566,568],{"class":93,"line":552},19,[205,554,555],{"class":218},"    padding",[205,557,338],{"class":210},[205,559,560],{"class":218},"0.5",[205,562,431],{"class":344},[205,564,565],{"class":218}," 0.9",[205,567,431],{"class":344},[205,569,549],{"class":210},[205,571,573,576,578,581,583],{"class":93,"line":572},20,[205,574,575],{"class":218},"    border-radius",[205,577,338],{"class":210},[205,579,580],{"class":218},"6",[205,582,403],{"class":344},[205,584,549],{"class":210},[205,586,588,591,593,596],{"class":93,"line":587},21,[205,589,590],{"class":218},"    color",[205,592,338],{"class":210},[205,594,595],{"class":218},"inherit",[205,597,549],{"class":210},[205,599,601,604,606,608],{"class":93,"line":600},22,[205,602,603],{"class":218},"    text-decoration",[205,605,338],{"class":210},[205,607,149],{"class":218},[205,609,549],{"class":210},[205,611,613],{"class":93,"line":612},23,[205,614,376],{"class":210},[205,616,618],{"class":93,"line":617},24,[205,619,383],{"emptyLinePlaceholder":382},[205,621,623,626],{"class":93,"line":622},25,[205,624,625],{"class":218},"  .submenu",[205,627,328],{"class":210},[205,629,631,634,636,639],{"class":93,"line":630},26,[205,632,633],{"class":218},"    position",[205,635,338],{"class":210},[205,637,638],{"class":218},"absolute",[205,640,549],{"class":210},[205,642,644,647,649,651,654],{"class":93,"line":643},27,[205,645,646],{"class":218},"    top",[205,648,338],{"class":210},[205,650,113],{"class":218},[205,652,653],{"class":344},"%",[205,655,549],{"class":210},[205,657,659,662,664,666],{"class":93,"line":658},28,[205,660,661],{"class":218},"    left",[205,663,338],{"class":210},[205,665,476],{"class":218},[205,667,549],{"class":210},[205,669,671,674,676,679,681],{"class":93,"line":670},29,[205,672,673],{"class":218},"    min-width",[205,675,338],{"class":210},[205,677,678],{"class":218},"12",[205,680,431],{"class":344},[205,682,549],{"class":210},[205,684,686,689,691,693],{"class":93,"line":685},30,[205,687,688],{"class":218},"    margin",[205,690,338],{"class":210},[205,692,476],{"class":218},[205,694,549],{"class":210},[205,696,698,700,702,704,706],{"class":93,"line":697},31,[205,699,555],{"class":218},[205,701,338],{"class":210},[205,703,100],{"class":218},[205,705,431],{"class":344},[205,707,549],{"class":210},[205,709,711,714,716,718],{"class":93,"line":710},32,[205,712,713],{"class":218},"    list-style",[205,715,338],{"class":210},[205,717,149],{"class":218},[205,719,549],{"class":210},[205,721,723,726,728,730,732,735,738],{"class":93,"line":722},33,[205,724,725],{"class":218},"    border",[205,727,338],{"class":210},[205,729,99],{"class":218},[205,731,403],{"class":344},[205,733,734],{"class":218}," solid",[205,736,737],{"class":218}," #cbd5e1",[205,739,549],{"class":210},[205,741,743,745,747,750,752],{"class":93,"line":742},34,[205,744,575],{"class":218},[205,746,338],{"class":210},[205,748,749],{"class":218},"10",[205,751,403],{"class":344},[205,753,549],{"class":210},[205,755,757,760,762,765],{"class":93,"line":756},35,[205,758,759],{"class":218},"    background",[205,761,338],{"class":210},[205,763,764],{"class":218},"#ffffff",[205,766,549],{"class":210},[205,768,770],{"class":93,"line":769},36,[205,771,383],{"emptyLinePlaceholder":382},[205,773,775],{"class":93,"line":774},37,[205,776,777],{"class":351},"    \u002F* CLOSED. This transition runs when leaving the open state, so its\n",[205,779,781],{"class":93,"line":780},38,[205,782,783],{"class":351},"       delay is the close delay. visibility waits for the fade to finish. *\u002F\n",[205,785,787,790,792,794],{"class":93,"line":786},39,[205,788,789],{"class":218},"    opacity",[205,791,338],{"class":210},[205,793,476],{"class":218},[205,795,549],{"class":210},[205,797,799,802,804,807],{"class":93,"line":798},40,[205,800,801],{"class":218},"    visibility",[205,803,338],{"class":210},[205,805,806],{"class":218},"hidden",[205,808,549],{"class":210},[205,810,812,815,817,819,822,824],{"class":93,"line":811},41,[205,813,814],{"class":218},"    translate",[205,816,338],{"class":210},[205,818,476],{"class":218},[205,820,821],{"class":218}," -0.25",[205,823,431],{"class":344},[205,825,549],{"class":210},[205,827,829,832],{"class":93,"line":828},42,[205,830,831],{"class":218},"    transition",[205,833,834],{"class":210},":\n",[205,836,838,841,843,845,848,851,854,857],{"class":93,"line":837},43,[205,839,840],{"class":210},"      opacity ",[205,842,95],{"class":218},[205,844,345],{"class":344},[205,846,847],{"class":218}," ease-in",[205,849,850],{"class":218}," var",[205,852,853],{"class":210},"(",[205,855,856],{"class":334},"--intent-close",[205,858,859],{"class":210},"),\n",[205,861,863,866,868,870,872,874,876,878],{"class":93,"line":862},44,[205,864,865],{"class":210},"      translate ",[205,867,95],{"class":218},[205,869,345],{"class":344},[205,871,847],{"class":218},[205,873,850],{"class":218},[205,875,853],{"class":210},[205,877,856],{"class":334},[205,879,859],{"class":210},[205,881,883,886,888,891,894,897,899,902,904,906,909,912,915,917],{"class":93,"line":882},45,[205,884,885],{"class":210},"      visibility ",[205,887,476],{"class":218},[205,889,890],{"class":344},"s",[205,892,893],{"class":218}," linear",[205,895,896],{"class":218}," calc",[205,898,853],{"class":210},[205,900,901],{"class":218},"var",[205,903,853],{"class":210},[205,905,856],{"class":334},[205,907,908],{"class":210},") ",[205,910,911],{"class":344},"+",[205,913,914],{"class":218}," 120",[205,916,345],{"class":344},[205,918,919],{"class":210},");\n",[205,921,923],{"class":93,"line":922},46,[205,924,376],{"class":210},[205,926,928],{"class":93,"line":927},47,[205,929,383],{"emptyLinePlaceholder":382},[205,931,933],{"class":93,"line":932},48,[205,934,935],{"class":351},"  \u002F* OPEN via hover: its transition runs when entering, so its delay is\n",[205,937,939],{"class":93,"line":938},49,[205,940,941],{"class":351},"     the open delay. *\u002F\n",[205,943,945,947,949,951,954,956,959],{"class":93,"line":944},50,[205,946,445],{"class":218},[205,948,504],{"class":344},[205,950,507],{"class":214},[205,952,953],{"class":218},":hover",[205,955,504],{"class":344},[205,957,958],{"class":218}," .submenu",[205,960,328],{"class":210},[205,962,964,966,968,970],{"class":93,"line":963},51,[205,965,789],{"class":218},[205,967,338],{"class":210},[205,969,99],{"class":218},[205,971,549],{"class":210},[205,973,975,977,979,982],{"class":93,"line":974},52,[205,976,801],{"class":218},[205,978,338],{"class":210},[205,980,981],{"class":218},"visible",[205,983,549],{"class":210},[205,985,987,989,991,993,996],{"class":93,"line":986},53,[205,988,814],{"class":218},[205,990,338],{"class":210},[205,992,476],{"class":218},[205,994,995],{"class":218}," 0",[205,997,549],{"class":210},[205,999,1001,1003],{"class":93,"line":1000},54,[205,1002,831],{"class":218},[205,1004,834],{"class":210},[205,1006,1008,1010,1012,1014,1017,1019,1021,1024],{"class":93,"line":1007},55,[205,1009,840],{"class":210},[205,1011,112],{"class":218},[205,1013,345],{"class":344},[205,1015,1016],{"class":218}," ease-out",[205,1018,850],{"class":218},[205,1020,853],{"class":210},[205,1022,1023],{"class":334},"--intent-open",[205,1025,859],{"class":210},[205,1027,1029,1031,1033,1035,1037,1039,1041,1043],{"class":93,"line":1028},56,[205,1030,865],{"class":210},[205,1032,112],{"class":218},[205,1034,345],{"class":344},[205,1036,1016],{"class":218},[205,1038,850],{"class":218},[205,1040,853],{"class":210},[205,1042,1023],{"class":334},[205,1044,859],{"class":210},[205,1046,1048,1050,1052,1054,1056,1058,1060,1062],{"class":93,"line":1047},57,[205,1049,885],{"class":210},[205,1051,476],{"class":218},[205,1053,890],{"class":344},[205,1055,893],{"class":218},[205,1057,850],{"class":218},[205,1059,853],{"class":210},[205,1061,1023],{"class":334},[205,1063,919],{"class":210},[205,1065,1067],{"class":93,"line":1066},58,[205,1068,376],{"class":210},[205,1070,1072],{"class":93,"line":1071},59,[205,1073,383],{"emptyLinePlaceholder":382},[205,1075,1077],{"class":93,"line":1076},60,[205,1078,1079],{"class":351},"  \u002F* OPEN via keyboard: no intent delay, focus is always deliberate. *\u002F\n",[205,1081,1083,1085,1087,1089,1092,1094,1096],{"class":93,"line":1082},61,[205,1084,445],{"class":218},[205,1086,504],{"class":344},[205,1088,507],{"class":214},[205,1090,1091],{"class":218},":focus-within",[205,1093,504],{"class":344},[205,1095,958],{"class":218},[205,1097,328],{"class":210},[205,1099,1101,1103,1105,1107],{"class":93,"line":1100},62,[205,1102,789],{"class":218},[205,1104,338],{"class":210},[205,1106,99],{"class":218},[205,1108,549],{"class":210},[205,1110,1112,1114,1116,1118],{"class":93,"line":1111},63,[205,1113,801],{"class":218},[205,1115,338],{"class":210},[205,1117,981],{"class":218},[205,1119,549],{"class":210},[205,1121,1123,1125,1127,1129,1131],{"class":93,"line":1122},64,[205,1124,814],{"class":218},[205,1126,338],{"class":210},[205,1128,476],{"class":218},[205,1130,995],{"class":218},[205,1132,549],{"class":210},[205,1134,1136,1138,1141,1143,1145,1147,1150,1152,1154,1156,1159,1161,1163],{"class":93,"line":1135},65,[205,1137,831],{"class":218},[205,1139,1140],{"class":210},": opacity ",[205,1142,112],{"class":218},[205,1144,345],{"class":344},[205,1146,1016],{"class":218},[205,1148,1149],{"class":210},", translate ",[205,1151,112],{"class":218},[205,1153,345],{"class":344},[205,1155,1016],{"class":218},[205,1157,1158],{"class":210},", visibility ",[205,1160,476],{"class":218},[205,1162,890],{"class":344},[205,1164,549],{"class":210},[205,1166,1168],{"class":93,"line":1167},66,[205,1169,376],{"class":210},[205,1171,1173],{"class":93,"line":1172},67,[205,1174,383],{"emptyLinePlaceholder":382},[205,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1203,1205,1207,1210,1212,1214,1216,1218,1221,1223,1225,1227,1230,1232,1234],{"class":93,"line":1177},68,[205,1179,625],{"class":218},[205,1181,533],{"class":214},[205,1183,392],{"class":210},[205,1185,450],{"class":218},[205,1187,338],{"class":210},[205,1189,546],{"class":218},[205,1191,421],{"class":210},[205,1193,481],{"class":218},[205,1195,338],{"class":210},[205,1197,100],{"class":218},[205,1199,431],{"class":344},[205,1201,1202],{"class":218}," 0.6",[205,1204,431],{"class":344},[205,1206,421],{"class":210},[205,1208,1209],{"class":218},"border-radius",[205,1211,338],{"class":210},[205,1213,580],{"class":218},[205,1215,403],{"class":344},[205,1217,421],{"class":210},[205,1219,1220],{"class":218},"color",[205,1222,338],{"class":210},[205,1224,595],{"class":218},[205,1226,421],{"class":210},[205,1228,1229],{"class":218},"text-decoration",[205,1231,338],{"class":210},[205,1233,149],{"class":218},[205,1235,434],{"class":210},[205,1237,1239,1241,1243,1245,1247,1250,1252,1255,1257,1260,1262,1264,1266,1268,1270,1272,1275,1277,1280],{"class":93,"line":1238},69,[205,1240,625],{"class":218},[205,1242,533],{"class":214},[205,1244,953],{"class":218},[205,1246,415],{"class":210},[205,1248,1249],{"class":218},".submenu",[205,1251,533],{"class":214},[205,1253,1254],{"class":218},":focus-visible",[205,1256,415],{"class":210},[205,1258,1259],{"class":218},".nav",[205,1261,504],{"class":344},[205,1263,507],{"class":214},[205,1265,504],{"class":344},[205,1267,533],{"class":214},[205,1269,953],{"class":218},[205,1271,392],{"class":210},[205,1273,1274],{"class":218},"background",[205,1276,338],{"class":210},[205,1278,1279],{"class":218},"#eef2ff",[205,1281,434],{"class":210},[205,1283,1285,1288,1290,1292,1295,1297,1299,1301,1303,1306,1308,1311,1313,1315,1317],{"class":93,"line":1284},70,[205,1286,1287],{"class":214},"  a",[205,1289,1254],{"class":218},[205,1291,392],{"class":210},[205,1293,1294],{"class":218},"outline",[205,1296,338],{"class":210},[205,1298,121],{"class":218},[205,1300,403],{"class":344},[205,1302,734],{"class":218},[205,1304,1305],{"class":218}," #4f46e5",[205,1307,421],{"class":210},[205,1309,1310],{"class":218},"outline-offset",[205,1312,338],{"class":210},[205,1314,121],{"class":218},[205,1316,403],{"class":344},[205,1318,434],{"class":210},[205,1320,1322],{"class":93,"line":1321},71,[205,1323,383],{"emptyLinePlaceholder":382},[205,1325,1327,1330],{"class":93,"line":1326},72,[205,1328,1329],{"class":344},"  @media",[205,1331,1332],{"class":210}," (prefers-reduced-motion: reduce) {\n",[205,1334,1336,1339,1341,1343,1345,1347,1349,1351,1353,1355,1358,1360,1362,1364],{"class":93,"line":1335},73,[205,1337,1338],{"class":218},"    .submenu",[205,1340,415],{"class":210},[205,1342,1259],{"class":218},[205,1344,504],{"class":344},[205,1346,507],{"class":214},[205,1348,953],{"class":218},[205,1350,504],{"class":344},[205,1352,958],{"class":218},[205,1354,392],{"class":210},[205,1356,1357],{"class":218},"translate",[205,1359,338],{"class":210},[205,1361,476],{"class":218},[205,1363,995],{"class":218},[205,1365,434],{"class":210},[205,1367,1369],{"class":93,"line":1368},74,[205,1370,376],{"class":210},[205,1372,1374,1377,1379],{"class":93,"line":1373},75,[205,1375,1376],{"class":210},"\u003C\u002F",[205,1378,317],{"class":214},[205,1380,222],{"class":210},[205,1382,1384,1386,1388],{"class":93,"line":1383},76,[205,1385,1376],{"class":210},[205,1387,250],{"class":214},[205,1389,222],{"class":210},[205,1391,1393,1395,1398],{"class":93,"line":1392},77,[205,1394,228],{"class":210},[205,1396,1397],{"class":214},"body",[205,1399,222],{"class":210},[205,1401,1403,1406,1409,1412,1414,1417],{"class":93,"line":1402},78,[205,1404,1405],{"class":210},"  \u003C",[205,1407,1408],{"class":214},"ul",[205,1410,1411],{"class":218}," class",[205,1413,236],{"class":210},[205,1415,1416],{"class":239},"\"nav\"",[205,1418,222],{"class":210},[205,1420,1422,1425,1428,1431,1433,1436,1438,1441,1444,1446],{"class":93,"line":1421},79,[205,1423,1424],{"class":210},"    \u003C",[205,1426,1427],{"class":214},"li",[205,1429,1430],{"class":210},">\u003C",[205,1432,32],{"class":214},[205,1434,1435],{"class":218}," href",[205,1437,236],{"class":210},[205,1439,1440],{"class":239},"\"\u002Fproducts\u002F\"",[205,1442,1443],{"class":210},">Products\u003C\u002F",[205,1445,32],{"class":214},[205,1447,222],{"class":210},[205,1449,1451,1454,1456,1458,1460,1463,1465,1467,1469,1471,1473,1475,1478,1481,1483,1486,1488,1490,1492,1494,1496,1498,1500,1503,1506,1508,1510,1512,1514,1516,1518,1520],{"class":93,"line":1450},80,[205,1452,1453],{"class":210},"      \u003C",[205,1455,1408],{"class":214},[205,1457,1411],{"class":218},[205,1459,236],{"class":210},[205,1461,1462],{"class":239},"\"submenu\"",[205,1464,1430],{"class":210},[205,1466,1427],{"class":214},[205,1468,1430],{"class":210},[205,1470,32],{"class":214},[205,1472,1435],{"class":218},[205,1474,236],{"class":210},[205,1476,1477],{"class":239},"\"\u002Fproducts\u002Fapi\u002F\"",[205,1479,1480],{"class":210},">API\u003C\u002F",[205,1482,32],{"class":214},[205,1484,1485],{"class":210},">\u003C\u002F",[205,1487,1427],{"class":214},[205,1489,1430],{"class":210},[205,1491,1427],{"class":214},[205,1493,1430],{"class":210},[205,1495,32],{"class":214},[205,1497,1435],{"class":218},[205,1499,236],{"class":210},[205,1501,1502],{"class":239},"\"\u002Fproducts\u002Fcli\u002F\"",[205,1504,1505],{"class":210},">CLI\u003C\u002F",[205,1507,32],{"class":214},[205,1509,1485],{"class":210},[205,1511,1427],{"class":214},[205,1513,1485],{"class":210},[205,1515,1408],{"class":214},[205,1517,1485],{"class":210},[205,1519,1427],{"class":214},[205,1521,222],{"class":210},[205,1523,1525,1527,1529,1531,1533,1535,1537,1540,1543,1545],{"class":93,"line":1524},81,[205,1526,1424],{"class":210},[205,1528,1427],{"class":214},[205,1530,1430],{"class":210},[205,1532,32],{"class":214},[205,1534,1435],{"class":218},[205,1536,236],{"class":210},[205,1538,1539],{"class":239},"\"\u002Fdocs\u002F\"",[205,1541,1542],{"class":210},">Docs\u003C\u002F",[205,1544,32],{"class":214},[205,1546,222],{"class":210},[205,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1575,1578,1580,1582,1584,1586,1588,1590,1592,1594,1596,1599,1602,1604,1606,1608,1610,1612,1614,1616],{"class":93,"line":1549},82,[205,1551,1453],{"class":210},[205,1553,1408],{"class":214},[205,1555,1411],{"class":218},[205,1557,236],{"class":210},[205,1559,1462],{"class":239},[205,1561,1430],{"class":210},[205,1563,1427],{"class":214},[205,1565,1430],{"class":210},[205,1567,32],{"class":214},[205,1569,1435],{"class":218},[205,1571,236],{"class":210},[205,1573,1574],{"class":239},"\"\u002Fdocs\u002Fstart\u002F\"",[205,1576,1577],{"class":210},">Getting started\u003C\u002F",[205,1579,32],{"class":214},[205,1581,1485],{"class":210},[205,1583,1427],{"class":214},[205,1585,1430],{"class":210},[205,1587,1427],{"class":214},[205,1589,1430],{"class":210},[205,1591,32],{"class":214},[205,1593,1435],{"class":218},[205,1595,236],{"class":210},[205,1597,1598],{"class":239},"\"\u002Fdocs\u002Fref\u002F\"",[205,1600,1601],{"class":210},">Reference\u003C\u002F",[205,1603,32],{"class":214},[205,1605,1485],{"class":210},[205,1607,1427],{"class":214},[205,1609,1485],{"class":210},[205,1611,1408],{"class":214},[205,1613,1485],{"class":210},[205,1615,1427],{"class":214},[205,1617,222],{"class":210},[205,1619,1621,1623,1625,1627,1629,1631,1633,1636,1639,1641,1643,1645],{"class":93,"line":1620},83,[205,1622,1424],{"class":210},[205,1624,1427],{"class":214},[205,1626,1430],{"class":210},[205,1628,32],{"class":214},[205,1630,1435],{"class":218},[205,1632,236],{"class":210},[205,1634,1635],{"class":239},"\"\u002Fpricing\u002F\"",[205,1637,1638],{"class":210},">Pricing\u003C\u002F",[205,1640,32],{"class":214},[205,1642,1485],{"class":210},[205,1644,1427],{"class":214},[205,1646,222],{"class":210},[205,1648,1650,1653,1655],{"class":93,"line":1649},84,[205,1651,1652],{"class":210},"  \u003C\u002F",[205,1654,1408],{"class":214},[205,1656,222],{"class":210},[205,1658,1660,1662,1664],{"class":93,"line":1659},85,[205,1661,1376],{"class":210},[205,1663,1397],{"class":214},[205,1665,222],{"class":210},[205,1667,1669,1671,1673],{"class":93,"line":1668},86,[205,1670,1376],{"class":210},[205,1672,200],{"class":214},[205,1674,222],{"class":210},[20,1676,1677,1678,1681,1682,1684,1685,1687,1688,1691,1692,1694],{},"The ",[15,1679,1680],{},"visibility"," delays are the subtle part. When closing, ",[15,1683,1680],{}," must stay ",[15,1686,981],{}," until the close delay ",[24,1689,1690],{},"and"," the fade are both over, so its delay is their sum. When opening via hover, ",[15,1693,1680],{}," must switch at the same moment the fade starts, so its delay equals the open delay. When opening via focus, everything is immediate.",[43,1696,1698],{"id":1697},"the-key-technique-the-entered-state-owns-the-delay","The key technique: the entered state owns the delay",[20,1700,1701,1702,1705,1706,1708,1709,1713],{},"The asymmetry works because of one cascade rule: when an element's state changes, the transition values of the ",[24,1703,1704],{},"new"," state apply. The ",[15,1707,953],{}," rule's delay therefore governs opening, and the base rule's delay governs closing. The same rule enables ",[32,1710,1712],{"href":1711},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing\u002F","entry versus exit easing","; here it is used for timing rather than curves.",[61,1715,68,1718,68,1721,68,1724,68,1727,68,1732,68,1737,68,1742,68,1746,68,1750,68,1754,68,1757,68,1761,68,1764,68,1767,68,1771,68,1777],{"viewBox":1716,"role":64,"ariaLabel":1717,"xmlns":66,"style":67},"0 0 720 260","Three states — closed, hover-open and focus-open — each with its own delay, and arrows showing which delay applies on each transition",[70,1719,1720],{},"Which delay applies when",[74,1722,1723],{},"Moving into the hover state uses the hover rule's 150 millisecond delay. Moving into the focus state uses zero delay. Moving back into the closed state uses the base rule's 300 millisecond delay.",[78,1725,1726],{"textAnchor":80,"x":81,"y":82,"style":83},"Each state carries the delay for arriving in it",[102,1728],{"x":1729,"y":1730,"width":136,"height":1731,"rx":749,"fill":149,"stroke":98,"strokeWidth":409,"opacity":151},"270","170","60",[78,1733,1736],{"textAnchor":80,"x":81,"y":1734,"style":1735},"196","text-anchor:middle;fill:currentColor;font:700 13px sans-serif","closed",[78,1738,1741],{"textAnchor":80,"x":81,"y":1739,"style":1740},"216","text-anchor:middle;fill:currentColor;font:12px ui-monospace,monospace","delay 300ms",[102,1743],{"x":1731,"y":1744,"width":140,"height":1731,"rx":749,"fill":120,"opacity":1745},"50","0.3",[78,1747,1749],{"textAnchor":80,"x":112,"y":1748,"style":1735},"76",":hover open",[78,1751,1753],{"textAnchor":80,"x":112,"y":1752,"style":1740},"96","delay 150ms",[102,1755],{"x":1756,"y":1744,"width":140,"height":1731,"rx":749,"fill":120,"opacity":1745},"460",[78,1758,1760],{"textAnchor":80,"x":1759,"y":1748,"style":1735},"560",":focus-within open",[78,1762,1763],{"textAnchor":80,"x":1759,"y":1752,"style":1740},"delay 0",[93,1765],{"x1":126,"y1":1730,"x2":140,"y2":1766,"stroke":98,"strokeWidth":409,"opacity":151},"112",[93,1768],{"x1":1769,"y1":1730,"x2":1770,"y2":1766,"stroke":98,"strokeWidth":409,"opacity":151},"420","520",[78,1772,1776],{"textAnchor":1773,"x":1774,"y":341,"style":1775},"end","206","text-anchor:end;fill:currentColor;font:11px sans-serif","pointer rests",[78,1778,1780],{"textAnchor":87,"x":1779,"y":341,"style":128},"514","Tab arrives",[20,1782,1783],{},"Because both open rules set the same properties, whichever matches applies; if a keyboard user focuses a link inside a menu that is also hovered, both selectors match and the later rule in source order — the focus rule — wins, giving immediate response. That ordering is deliberate.",[43,1785,1787],{"id":1786},"choosing-the-numbers","Choosing the numbers",[20,1789,1790],{},"The open delay should be long enough to filter passing pointers and short enough that a deliberate hover feels responsive. Studies of desktop menus and long practice converge on roughly 100 to 200 milliseconds; below 80 many passes still trigger, above 250 the menu feels sluggish. The close delay should cover a diagonal trip across a gap or a neighbouring trigger, which for typical menu geometry is 200 to 400 milliseconds. Tooltips are the exception: they benefit from a longer open delay — 300 to 500 milliseconds — because they are supplementary, and a very short close delay, because a lingering tooltip obscures content.",[20,1792,1793],{},"Geometry changes the numbers too. A submenu that opens directly beneath its trigger with no gap needs very little close delay, because the pointer never leaves a hovered element on the way down. A mega menu that opens a large panel offset from its trigger, or a fly-out that opens to the side across a gap, needs the upper end of the range. Closing the gap is often better than lengthening the delay: extend the trigger's hit area with padding, or position the submenu so it overlaps the trigger's edge by a few pixels, and the pointer stays inside a hovered element throughout the trip.",[20,1795,1796],{},"Put the values in tokens, as the example does, so every hover-triggered component in the product shares the same intent timing. Inconsistent delays between menus are more disorienting than any particular value.",[43,1798,1800],{"id":1799},"accessibility-notes","Accessibility notes",[20,1802,1803,1804,1806,1807,1811],{},"Hover-only interactions exclude keyboard, touch and many assistive-technology users, so every hover menu must also open on focus — here via ",[15,1805,1091],{}," — and on touch devices should be reachable by tapping the parent link or a disclosure button. WCAG 1.4.13 Content on Hover or Focus requires that content revealed on hover can be dismissed without moving the pointer (usually Escape, which needs a few lines of script or the popover API), that the pointer can move onto the revealed content without it disappearing (which the close delay and adjacent positioning provide), and that it remains visible until dismissed or no longer relevant. The close delay helps with the second requirement directly. For devices without hover at all, gating hover behaviour with ",[32,1808,1810],{"href":1809},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fpointer-and-hover-media-queries\u002F","pointer and hover media queries"," avoids sticky-hover problems on touchscreens.",[43,1813,1815],{"id":1814},"browser-support","Browser support",[20,1817,1818,1820,1821,1823,1824,1827,1828,1830],{},[15,1819,17],{}," and per-state transitions are supported in every browser with CSS transitions, which dates from Chrome 26, Edge 12, Firefox 16 and Safari 9. ",[15,1822,1091],{}," is supported in Chrome 60+, Edge 79+, Firefox 52+ and Safari 10.1+. Custom properties inside transition delays and ",[15,1825,1826],{},"calc()"," in time values are supported in all current engines. The standalone ",[15,1829,1357],{}," property is supported in Chrome and Edge 104+, Firefox 72+ and Safari 14.1+.",[43,1832,1834],{"id":1833},"faq","FAQ",[20,1836,1837,1841],{},[1838,1839,1840],"strong",{},"What is hover intent?","\nThe idea that a pointer passing briefly over an element is not the same as a user wanting to interact with it. Hover-intent techniques wait a short time before reacting to hover, so menus and tooltips only open when the pointer actually rests on their trigger.",[20,1843,1844,1847,1848,1850],{},[1838,1845,1846],{},"How can CSS delay a hover effect without JavaScript?","\nPut a ",[15,1849,17],{}," on the hovered state. Because the transition values of the state being entered apply, the delay only affects entering hover. Leaving hover uses the base state's transition, which can have a different or zero delay.",[20,1852,1853,1856],{},[1838,1854,1855],{},"Why should the close delay differ from the open delay?","\nOpening should wait long enough to ignore passing pointers, typically 100 to 200 milliseconds. Closing should wait a little so a user moving diagonally from a trigger into its submenu does not lose it on the way, typically 200 to 400 milliseconds.",[20,1858,1859,1862,1863,1865,1866,1868,1869,1871],{},[1838,1860,1861],{},"Should keyboard focus be delayed like hover?","\nNo. Focus is always intentional, so focus-triggered menus and tooltips should appear immediately. Use separate selectors so ",[15,1864,1254],{}," and ",[15,1867,1091],{}," states have no delay while ",[15,1870,953],{}," keeps its intent delay.",[43,1873,1875],{"id":1874},"related","Related",[1408,1877,1878,1883,1890,1896],{},[1427,1879,1880,1882],{},[32,1881,35],{"href":34}," — the parent guide.",[1427,1884,1885,1889],{},[32,1886,1888],{"href":1887},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips\u002F","Accessible CSS-Only Tooltips"," — longer open delays for supplementary content.",[1427,1891,1892,1895],{},[32,1893,1894],{"href":1809},"Pointer and Hover Media Queries"," — when hover is not available at all.",[1427,1897,1898,1902],{},[32,1899,1901],{"href":1900},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries\u002F","Responsive Navigation Without Media Queries"," — the navigation these menus live in.",[317,1904,1905],{},"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 pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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}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);}",{"title":201,"searchDepth":225,"depth":225,"links":1907},[1908,1909,1910,1911,1912,1913,1914,1915,1916],{"id":45,"depth":225,"text":46},{"id":58,"depth":225,"text":59},{"id":189,"depth":225,"text":190},{"id":1697,"depth":225,"text":1698},{"id":1786,"depth":225,"text":1787},{"id":1799,"depth":225,"text":1800},{"id":1814,"depth":225,"text":1815},{"id":1833,"depth":225,"text":1834},{"id":1874,"depth":225,"text":1875},"Stop menus and tooltips flickering as the pointer passes: open and close delays with transition-delay, grace periods for diagonal moves, and instant focus.","md",{"pageTitle":1920,"datePublished":1921,"dateModified":1921,"faq":1922},"Hover Intent Delays With transition-delay","2026-09-18",[1923,1925,1927,1929],{"q":1840,"a":1924},"The idea that a pointer passing briefly over an element is not the same as a user wanting to interact with it. Hover-intent techniques wait a short time before reacting to hover, so menus and tooltips only open when the pointer actually rests on their trigger.",{"q":1846,"a":1926},"Put a transition-delay on the hovered state. Because the transition values of the state being entered apply, the delay only affects entering hover. Leaving hover uses the base state's transition, which can have a different or zero delay.",{"q":1855,"a":1928},"Opening should wait long enough to ignore passing pointers, typically 100 to 200 milliseconds. Closing should wait a little so a user moving diagonally from a trigger into its submenu does not lose it on the way, typically 200 to 400 milliseconds.",{"q":1861,"a":1930},"No. Focus is always intentional, so focus-triggered menus and tooltips should appear immediately. Use separate selectors so :focus-visible and :focus-within states have no delay while :hover keeps its intent delay.","\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay",{"title":5,"description":1917},"css-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay\u002Findex","Us_MJ62JioSrqW5XsI8zQrp5jmseB0AzCfwxAmd3DAo",[1936,1939,1942,1945,1948,1951,1954,1957,1960,1963,1966,1969,1972,1975,1978,1981,1984,1987,1990,1993,1996,1999,2002,2005,2008,2011,2014,2017,2020,2023,2026,2029,2032,2035,2038,2041,2044,2047,2050,2053,2056,2059,2062,2065,2068,2071,2074,2077,2080,2083,2086,2089,2092,2095,2098,2101,2104,2107,2110,2111,2114,2117,2120,2123,2126,2129,2132,2135,2138,2141,2144,2147,2150,2153,2156,2159,2162,2165,2168,2171,2174,2177,2180,2183,2186,2189,2192,2195,2198,2201,2204,2207,2210,2213,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,2314,2317,2320,2323,2326,2329,2332,2335,2338,2341,2344,2347,2350,2353,2356,2359,2362,2365,2368,2371,2374,2377,2380,2383,2386,2389,2392,2395,2398,2401,2404,2407,2410,2413,2416,2419,2422,2425,2428,2431,2434,2437,2440,2443,2446,2449,2452,2455,2458,2461,2464,2467,2470,2473,2476,2479,2482,2485,2488,2491],{"path":1937,"title":1938},"\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":1940,"title":1941},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1943,"title":1944},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1946,"title":1947},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1949,"title":1950},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fpause-controls-for-looping-animations","Pause Controls for Looping CSS Animations: Meeting WCAG 2.2.2",{"path":1952,"title":1953},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1955,"title":1956},"\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":1958,"title":1959},"\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":1961,"title":1962},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1964,"title":1965},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1967,"title":1968},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fanimated-gradient-borders-with-property","Animated Gradient Borders With @property: A Spinning Highlight Without Extra Elements",{"path":1970,"title":1971},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"path":1973,"title":1974},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1976,"title":1977},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges","Fading Edges With mask-image: Soft Boundaries That Work on Any Background",{"path":1979,"title":1980},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon","Morphing Shapes With clip-path: polygon(): Point-Matched Transitions",{"path":1982,"title":1983},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1985,"title":1986},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fcolor-mix-hover-states","Hover and Active States With color-mix(): One Token, Every Shade",{"path":1988,"title":1989},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1991,"title":1992},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Flight-dark-function-for-themes","Light and Dark Themes With light-dark(): One Declaration per Colour",{"path":1994,"title":1995},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1997,"title":1998},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":2000,"title":2001},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":2003,"title":2004},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":2006,"title":2007},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":2009,"title":2010},"\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":2012,"title":2013},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":2015,"title":2016},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":2018,"title":2019},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":2021,"title":2022},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":2024,"title":2025},"\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":2027,"title":2028},"\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":2030,"title":2031},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":2033,"title":2034},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":2036,"title":2037},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":2039,"title":2040},"\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":2042,"title":2043},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":2045,"title":2046},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":2048,"title":2049},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":2051,"title":2052},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":2054,"title":2055},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":2057,"title":2058},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":2060,"title":2061},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":2063,"title":2064},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":2066,"title":2067},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":2069,"title":2070},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":2072,"title":2073},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":2075,"title":2076},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Finterpolate-size-for-height-auto-animation","Animating to height: auto With interpolate-size and calc-size()",{"path":2078,"title":2079},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":2081,"title":2082},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":2084,"title":2085},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":2087,"title":2088},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":2090,"title":2091},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":2093,"title":2094},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs","Spring and Bounce Easing With linear(): Physical Motion Without JavaScript",{"path":2096,"title":2097},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fsteps-easing-for-sprite-animations","steps() Easing: Sprite Sheets, Typewriters and Other Frame-by-Frame Effects",{"path":2099,"title":2100},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":2102,"title":2103},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":2105,"title":2106},"\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":2108,"title":2109},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1931,"title":5},{"path":2112,"title":2113},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":2115,"title":2116},"\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":2118,"title":2119},"\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":2121,"title":2122},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2124,"title":2125},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":2127,"title":2128},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-fill-mode-explained","animation-fill-mode: What an Animation Applies Before and After It Runs",{"path":2130,"title":2131},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2133,"title":2134},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2136,"title":2137},"\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":2139,"title":2140},"\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":2142,"title":2143},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2145,"title":2146},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":2148,"title":2149},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2151,"title":2152},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":2154,"title":2155},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":2157,"title":2158},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":2160,"title":2161},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2163,"title":2164},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2166,"title":2167},"\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":2169,"title":2170},"\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":2172,"title":2173},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2175,"title":2176},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2178,"title":2179},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":2181,"title":2182},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2184,"title":2185},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2187,"title":2188},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":2190,"title":2191},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":2193,"title":2194},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":2196,"title":2197},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2199,"title":2200},"\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":2202,"title":2203},"\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":2205,"title":2206},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":2208,"title":2209},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":2211,"title":2212},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":406,"title":2214},"Modern CSS Layouts & Micro-Interactions",{"path":2216,"title":2217},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2219,"title":2220},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2222,"title":2223},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":2225,"title":2226},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2228,"title":2229},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2231,"title":2232},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":2234,"title":2235},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":2237,"title":2238},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":2240,"title":2241},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2243,"title":2244},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2246,"title":2247},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2249,"title":2250},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":2252,"title":2253},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":2255,"title":2256},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-queries-inside-css-nesting","Container Queries Inside CSS Nesting: Keeping Responses Next to the Styles They Change",{"path":2258,"title":2259},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":2261,"title":2262},"\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":2264,"title":2265},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2267,"title":2268},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2270,"title":2271},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fdebugging-container-queries-in-devtools","Debugging Container Queries in DevTools: Why a Rule Doesn't Match",{"path":2273,"title":2274},"\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":2276,"title":2277},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2279,"title":2280},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2282,"title":2283},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2285,"title":2286},"\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":2288,"title":2289},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":2291,"title":2292},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-template-areas-responsive-layouts","Responsive Layouts With grid-template-areas: Rearranging Regions by Name",{"path":2294,"title":2295},"\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":2297,"title":2298},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2300,"title":2301},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fmasonry-style-layouts-with-grid","Masonry-Style Layouts With the CSS That Ships Today",{"path":2303,"title":2304},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Foverlapping-elements-with-grid-stacking","Overlapping Elements With Grid Stacking: Layers Without position: absolute",{"path":2306,"title":2307},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2309,"title":2310},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fcentering-in-css-every-method","Centering in CSS: Every Modern Method and When Each One Breaks",{"path":2312,"title":2313},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-basis-vs-width","flex-basis vs width: Which Size a Flex Item Actually Starts From",{"path":2315,"title":2316},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2318,"title":2319},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2321,"title":2322},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2324,"title":2325},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2327,"title":2328},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fsticky-footer-with-flexbox-and-grid","Sticky Footer With Flexbox or Grid: Pinning the Footer on Short Pages",{"path":2330,"title":2331},"\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":2333,"title":2334},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2336,"title":2337},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-line-height-and-measure","Fluid Line Height and Measure: Keeping Text Readable as It Scales",{"path":2339,"title":2340},"\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":2342,"title":2343},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2345,"title":2346},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2348,"title":2349},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2351,"title":2352},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ftext-wrap-balance-and-pretty","text-wrap: balance and pretty: Better Line Breaks Without Manual Breaks",{"path":2354,"title":2355},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":2357,"title":2358},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2360,"title":2361},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fcontent-visibility-and-contain-intrinsic-size","content-visibility and contain-intrinsic-size: Rendering Only What Is Near the Screen",{"path":2363,"title":2364},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2366,"title":2367},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Flayout-widths-with-min-max-clamp","Layout Widths With min(), max() and clamp(): Sizing Without Breakpoints",{"path":2369,"title":2370},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2372,"title":2373},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2375,"title":2376},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2378,"title":2379},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2381,"title":2382},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2384,"title":2385},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2387,"title":2388},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2390,"title":2391},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Frevert-layer-and-revert-keywords","initial, inherit, unset, revert and revert-layer: Undoing Styles Correctly",{"path":2393,"title":2394},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2396,"title":2397},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fcontent-aware-card-layouts-with-has","Content-Aware Card Layouts With :has(): One Component, Many Shapes",{"path":2399,"title":2400},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2402,"title":2403},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fform-validation-layouts-with-has","Form Validation Layouts With :has(): Styling Groups From Field State",{"path":2405,"title":2406},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-selector-performance",":has() Selector Performance: What Is Cheap, What Is Not, and How to Measure",{"path":2408,"title":2409},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fhas-vs-container-style-queries",":has() vs Container Style Queries: Discovered State and Published State",{"path":2411,"title":2412},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2414,"title":2415},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fquantity-queries-with-has","Quantity Queries With :has(): Layouts That Respond to How Many Items There Are",{"path":2417,"title":2418},"\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":2420,"title":2421},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2423,"title":2424},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2426,"title":2427},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2429,"title":2430},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2432,"title":2433},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2435,"title":2436},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2438,"title":2439},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2441,"title":2442},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2444,"title":2445},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2447,"title":2448},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fhorizontal-scrolling-card-rows","Horizontal Scrolling Card Rows: Swipeable Lists That Stay in Their Lane",{"path":2450,"title":2451},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2453,"title":2454},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Foverscroll-behavior-for-nested-scrolling","overscroll-behavior: Taming Nested Scrolling, Pull-to-Refresh and Back-Swipe",{"path":2456,"title":2457},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fscroll-margin-and-scroll-padding-for-sticky-headers","scroll-margin and scroll-padding: Keeping Targets Clear of Sticky Headers",{"path":2459,"title":2460},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2462,"title":2463},"\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":2465,"title":2466},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2468,"title":2469},"\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":2471,"title":2472},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2474,"title":2475},"\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",{"path":2477,"title":2478},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fdvh-svh-lvh-mobile-viewport-units","dvh, svh and lvh: Choosing the Right Mobile Viewport Unit",{"path":2480,"title":2481},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Ffull-bleed-sections-in-constrained-layouts","Full-Bleed Sections in a Constrained Layout: Breaking Out Without Breaking the Page",{"path":2483,"title":2484},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2486,"title":2487},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fsafe-area-insets-for-notched-screens","Safe Area Insets: Designing Around Notches, Corners and Home Indicators",{"path":2489,"title":2490},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fviewport-units-vs-container-units","Viewport Units vs Container Units: Choosing the Right Reference Box",{"path":2492,"title":2493},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2495,"caption":2496,"height":2497,"html":2498,"css":2499},"Navigation menus with hover-intent delays","Sweep the pointer quickly across the items: nothing opens. Rest on one: its menu opens after 150ms and survives a brief exit.",220,"\n\u003Cul class=\"nav\">\n  \u003Cli>\u003Ca href=\"#\">Products\u003C\u002Fa>\n    \u003Cul class=\"submenu\">\u003Cli>\u003Ca href=\"#\">API\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#\">CLI\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"#\">Docs\u003C\u002Fa>\n    \u003Cul class=\"submenu\">\u003Cli>\u003Ca href=\"#\">Getting started\u003C\u002Fa>\u003C\u002Fli>\u003Cli>\u003Ca href=\"#\">Reference\u003C\u002Fa>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fli>\n  \u003Cli>\u003Ca href=\"#\">Pricing\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>","\n:root { --intent-open: 150ms; --intent-close: 300ms; }\nbody { place-items: start center; padding-top: 1rem; }\n.nav { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }\n.nav > li { position: relative; }\n.nav > li > a { display: block; padding: 0.5rem 0.9rem; border-radius: 6px; color: inherit; text-decoration: none; }\n.submenu {\n  position: absolute; top: 100%; left: 0; min-width: 12rem; margin: 0; padding: 0.4rem; list-style: none;\n  border: 1px solid var(--demo-border); border-radius: 10px; background: var(--demo-bg);\n  opacity: 0; visibility: hidden; translate: 0 -0.25rem;\n  transition: opacity 120ms ease-in var(--intent-close), translate 120ms ease-in var(--intent-close), visibility 0s linear calc(var(--intent-close) + 120ms);\n}\n.nav > li:hover > .submenu {\n  opacity: 1; visibility: visible; translate: 0 0;\n  transition: opacity 160ms ease-out var(--intent-open), translate 160ms ease-out var(--intent-open), visibility 0s linear var(--intent-open);\n}\n.nav > li:focus-within > .submenu { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 160ms ease-out, translate 160ms ease-out, visibility 0s; }\n.submenu a { display: block; padding: 0.4rem 0.6rem; border-radius: 6px; color: inherit; text-decoration: none; }\n.submenu a:hover, .submenu a:focus-visible, .nav > li > a:hover { background: var(--demo-surface); }\na:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 2px; }\n@media (prefers-reduced-motion: reduce) { .submenu, .nav > li:hover > .submenu { translate: 0 0; } }",1789717747012]