[{"data":1,"prerenderedAt":2279},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation\u002F":3,"content-all-pages":1714,"live-demo:easing-overshoot-anticipation":2273},{"id":4,"title":5,"body":6,"description":1693,"extension":1694,"meta":1695,"navigation":489,"path":1710,"seo":1711,"stem":1712,"__hash__":1713},"content\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation\u002Findex.md","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"type":7,"value":8,"toc":1682},"minimark",[9,19,60,65,68,71,74,78,84,173,215,218,222,225,229,1207,1220,1224,1231,1286,1293,1442,1450,1454,1457,1504,1510,1514,1575,1579,1595,1599,1611,1617,1626,1643,1647,1679],[10,11,13,14,18],"h1",{"id":12},"overshoot-and-anticipation-with-cubic-bezier-motion-with-character","Overshoot and Anticipation With ",[15,16,17],"code",{},"cubic-bezier()",": Motion With Character",[20,21,22,23,26,27,26,30,26,33,36,37,41,42,45,46,48,49,54,55,59],"p",{},"The standard easing keywords — ",[15,24,25],{},"ease",", ",[15,28,29],{},"ease-in",[15,31,32],{},"ease-out",[15,34,35],{},"ease-in-out"," — are polite. They start and stop smoothly and never go anywhere they were not told to. That is the right default, but it makes everything feel the same. Two techniques borrowed from character animation add personality with a single curve: ",[38,39,40],"em",{},"overshoot",", where motion carries a little past its target and settles back, and ",[38,43,44],{},"anticipation",", where motion dips backwards before it launches. Both come from pushing ",[15,47,17],{}," control points outside the 0–1 range. This page shows the exact values, the physical intuition behind them, and — just as important — where they make an interface feel worse. It is part of ",[50,51,53],"a",{"href":52},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002F","Easing & Motion Design"," within the ",[50,56,58],{"href":57},"\u002Fcss-only-micro-interactions-animations\u002F","CSS-Only Micro-Interactions & Animations"," guide.",[61,62,64],"h2",{"id":63},"why-character-matters-and-when-it-does-not","Why character matters, and when it does not",[20,66,67],{},"Real objects have mass. A drawer that slams open overshoots on its runners; a person about to jump crouches first. When interface elements borrow those cues, they feel as though they obey the same physics as the world, and users read them as more responsive and more deliberate. The effect is small but measurable in how \"snappy\" an interface feels.",[20,69,70],{},"The same cues become noise when overused. An overshoot on every hover, every dropdown and every tooltip makes an interface feel bouncy and imprecise; anticipation on a menu makes it feel slow, because the menu starts by going the wrong way. The working rule is to reserve character easing for moments that deserve emphasis — an element arriving, a state being confirmed — and keep routine, frequent interactions on neutral curves.",[20,72,73],{},"There is also an accessibility angle. Overshoot and anticipation add movement that is not strictly necessary. For users who ask for reduced motion, both should drop back to a plain curve or no transition.",[61,75,77],{"id":76},"reading-the-four-numbers","Reading the four numbers",[20,79,80,83],{},[15,81,82],{},"cubic-bezier(x1, y1, x2, y2)"," describes a curve from (0, 0) to (1, 1) with two control points. The x values are time and must stay between 0 and 1. The y values are progress and may go anywhere. The first control point shapes the start of the motion; the second shapes the end.",[85,86,92,93,92,97,92,101,92,109,92,121,92,126,92,131,92,136,92,140,92,143,92,148,92,150,92,153,92,157,92,160,92,165,92,169],"svg",{"viewBox":87,"role":88,"ariaLabel":89,"xmlns":90,"style":91},"0 0 720 340","img","Three easing curves plotted on progress against time: a neutral ease-out, an overshoot curve rising above 1, and an anticipation curve dipping below 0","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[94,95,96],"title",{},"Control points outside the unit square",[98,99,100],"desc",{},"Three plots side by side. The ease-out curve stays within the square. The overshoot curve with a second control point above 1 rises above the top line before returning. The anticipation curve with a first control point below 0 dips beneath the bottom line before rising.",[102,103,108],"text",{"textAnchor":104,"x":105,"y":106,"style":107},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","The y values are allowed to leave the box",[110,111],"rect",{"x":112,"y":113,"width":114,"height":115,"fill":116,"stroke":117,"strokeDashArray":118,"opacity":120},"40","90","180","160","none","currentColor",[119,119],"4","0.5",[122,123],"path",{"d":124,"fill":116,"stroke":125,"strokeWidth":119},"M40 250 C80 110 120 90 220 90","#7aa2ff",[102,127,32],{"textAnchor":104,"x":128,"y":129,"style":130},"130","282","text-anchor:middle;fill:currentColor;font:600 12px sans-serif",[102,132,135],{"textAnchor":104,"x":128,"y":133,"style":134},"302","text-anchor:middle;fill:currentColor;font:11px ui-monospace,monospace","(0.22, 1, 0.36, 1)",[110,137],{"x":138,"y":113,"width":114,"height":115,"fill":116,"stroke":117,"strokeDashArray":139,"opacity":120},"270",[119,119],[122,141],{"d":142,"fill":116,"stroke":125,"strokeWidth":119},"M270 250 C330 60 360 50 450 90",[102,144,147],{"textAnchor":104,"x":105,"y":145,"style":146},"72","text-anchor:middle;fill:currentColor;font:11px sans-serif","above 1",[102,149,40],{"textAnchor":104,"x":105,"y":129,"style":130},[102,151,152],{"textAnchor":104,"x":105,"y":133,"style":134},"(0.34, 1.56, 0.64, 1)",[110,154],{"x":155,"y":113,"width":114,"height":115,"fill":116,"stroke":117,"strokeDashArray":156,"opacity":120},"500",[119,119],[122,158],{"d":159,"fill":116,"stroke":125,"strokeWidth":119},"M500 250 C560 300 600 150 680 90",[102,161,164],{"textAnchor":104,"x":162,"y":163,"style":146},"560","286","below 0",[102,166,44],{"textAnchor":104,"x":167,"y":168,"style":130},"590","316",[102,170,172],{"textAnchor":104,"x":167,"y":171,"style":134},"334","(0.36, -0.6, 0.66, 1)",[174,175,176,192,205],"ul",{},[177,178,179,183,184,187,188,191],"li",{},[180,181,182],"strong",{},"Overshoot:"," set ",[15,185,186],{},"y2"," above 1. The end of the curve bulges past the target, so progress exceeds 100% briefly and returns. ",[15,189,190],{},"cubic-bezier(0.34, 1.56, 0.64, 1)"," peaks at roughly 110% — a clear but brief overshoot.",[177,193,194,183,197,200,201,204],{},[180,195,196],{},"Anticipation:",[15,198,199],{},"y1"," below 0. The start of the curve dips beneath the origin, so progress goes briefly negative before accelerating forward. ",[15,202,203],{},"cubic-bezier(0.36, -0.6, 0.66, 1)"," pulls back about 8% before launching.",[177,206,207,210,211,214],{},[180,208,209],{},"Both:"," ",[15,212,213],{},"cubic-bezier(0.68, -0.6, 0.32, 1.6)"," does both, which reads as springy and theatrical. Use it sparingly.",[20,216,217],{},"The size of the overshoot in pixels is the progress overshoot multiplied by the distance travelled. A 10% overshoot on a 16-pixel icon is under 2 pixels; on a 320-pixel drawer it is 32 pixels, which is too much. Scale the curve's strength inversely with distance.",[61,219,221],{"id":220},"the-complete-implementation","The complete implementation",[20,223,224],{},"The demo shows the same card-arrival and card-dismissal with three easing tokens. Watch the arrival row for overshoot and the dismissal row for anticipation.",[226,227],"live-demo",{"name":228},"easing-overshoot-anticipation",[230,231,236],"pre",{"className":232,"code":233,"language":234,"meta":235,"style":235},"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>Overshoot and anticipation\u003C\u002Ftitle>\n\u003Cstyle>\n  :root {\n    \u002F* Easing tokens: name the intent, not the numbers. *\u002F\n    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);   \u002F* neutral arrival *\u002F\n    --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1); \u002F* emphatic arrival *\u002F\n    --ease-anticipate: cubic-bezier(0.36, -0.6, 0.66, 1); \u002F* wind-up departure *\u002F\n  }\n\n  body { font: 15px\u002F1.5 system-ui, sans-serif; margin: 1.5rem; display: grid; gap: 1rem; }\n\n  .lane {\n    container-type: inline-size;   \u002F* so the travel distance can use cqi *\u002F\n    position: relative;\n    height: 3rem;\n    border-radius: 8px;\n    background: #f1f5f9;\n    overflow: hidden;\n  }\n\n  .chip {\n    position: absolute;\n    inset-block: 0.5rem;\n    left: 0.5rem;\n    width: 5rem;\n    border-radius: 6px;\n    background: #4f46e5;\n    color: #ffffff;\n    display: grid;\n    place-items: center;\n    font-size: 0.8rem;\n    animation: arrive 1.8s infinite alternate;\n  }\n\n  \u002F* The chip travels across the lane and back. alternate makes the\n     return trip play the curve in reverse, so overshoot on arrival\n     becomes anticipation on departure automatically. *\u002F\n  @keyframes arrive {\n    from { translate: 0 0; }\n    to   { translate: calc(100cqi - 7rem) 0; }   \u002F* lane width minus chip and margins *\u002F\n  }\n\n  .chip--standard   { animation-timing-function: var(--ease-standard); }\n  .chip--overshoot  { animation-timing-function: var(--ease-overshoot); }\n  .chip--anticipate { animation-timing-function: var(--ease-anticipate); }\n\n  @media (prefers-reduced-motion: reduce) {\n    .chip { animation: none; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--standard\">standard\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--overshoot\">overshoot\u003C\u002Fspan>\u003C\u002Fdiv>\n  \u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--anticipate\">anticipate\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[15,237,238,258,278,288,306,331,345,355,364,371,410,445,478,484,491,563,568,576,588,602,617,632,645,658,663,668,676,688,702,716,731,745,757,770,782,795,810,833,838,843,849,855,861,872,893,936,941,946,970,992,1013,1018,1027,1044,1049,1059,1068,1078,1119,1154,1189,1198],{"__ignoreMap":235},[239,240,243,247,251,255],"span",{"class":241,"line":242},"line",1,[239,244,246],{"class":245},"suds8","\u003C!",[239,248,250],{"class":249},"sne4z","doctype",[239,252,254],{"class":253},"s-5SL"," html",[239,256,257],{"class":245},">\n",[239,259,261,264,266,269,272,276],{"class":241,"line":260},2,[239,262,263],{"class":245},"\u003C",[239,265,234],{"class":249},[239,267,268],{"class":253}," lang",[239,270,271],{"class":245},"=",[239,273,275],{"class":274},"sT6z2","\"en\"",[239,277,257],{"class":245},[239,279,281,283,286],{"class":241,"line":280},3,[239,282,263],{"class":245},[239,284,285],{"class":249},"head",[239,287,257],{"class":245},[239,289,291,293,296,299,301,304],{"class":241,"line":290},4,[239,292,263],{"class":245},[239,294,295],{"class":249},"meta",[239,297,298],{"class":253}," charset",[239,300,271],{"class":245},[239,302,303],{"class":274},"\"utf-8\"",[239,305,257],{"class":245},[239,307,309,311,313,316,318,321,324,326,329],{"class":241,"line":308},5,[239,310,263],{"class":245},[239,312,295],{"class":249},[239,314,315],{"class":253}," name",[239,317,271],{"class":245},[239,319,320],{"class":274},"\"viewport\"",[239,322,323],{"class":253}," content",[239,325,271],{"class":245},[239,327,328],{"class":274},"\"width=device-width, initial-scale=1\"",[239,330,257],{"class":245},[239,332,334,336,338,341,343],{"class":241,"line":333},6,[239,335,263],{"class":245},[239,337,94],{"class":249},[239,339,340],{"class":245},">Overshoot and anticipation\u003C\u002F",[239,342,94],{"class":249},[239,344,257],{"class":245},[239,346,348,350,353],{"class":241,"line":347},7,[239,349,263],{"class":245},[239,351,352],{"class":249},"style",[239,354,257],{"class":245},[239,356,358,361],{"class":241,"line":357},8,[239,359,360],{"class":253},"  :root",[239,362,363],{"class":245}," {\n",[239,365,367],{"class":241,"line":366},9,[239,368,370],{"class":369},"sLBg1","    \u002F* Easing tokens: name the intent, not the numbers. *\u002F\n",[239,372,374,378,381,384,387,390,392,395,397,400,402,404,407],{"class":241,"line":373},10,[239,375,377],{"class":376},"soyes","    --ease-standard",[239,379,380],{"class":245},": ",[239,382,383],{"class":253},"cubic-bezier",[239,385,386],{"class":245},"(",[239,388,389],{"class":253},"0.22",[239,391,26],{"class":245},[239,393,394],{"class":253},"1",[239,396,26],{"class":245},[239,398,399],{"class":253},"0.36",[239,401,26],{"class":245},[239,403,394],{"class":253},[239,405,406],{"class":245},");   ",[239,408,409],{"class":369},"\u002F* neutral arrival *\u002F\n",[239,411,413,416,418,420,422,425,427,430,432,435,437,439,442],{"class":241,"line":412},11,[239,414,415],{"class":376},"    --ease-overshoot",[239,417,380],{"class":245},[239,419,383],{"class":253},[239,421,386],{"class":245},[239,423,424],{"class":253},"0.34",[239,426,26],{"class":245},[239,428,429],{"class":253},"1.56",[239,431,26],{"class":245},[239,433,434],{"class":253},"0.64",[239,436,26],{"class":245},[239,438,394],{"class":253},[239,440,441],{"class":245},"); ",[239,443,444],{"class":369},"\u002F* emphatic arrival *\u002F\n",[239,446,448,451,453,455,457,459,461,464,466,469,471,473,475],{"class":241,"line":447},12,[239,449,450],{"class":376},"    --ease-anticipate",[239,452,380],{"class":245},[239,454,383],{"class":253},[239,456,386],{"class":245},[239,458,399],{"class":253},[239,460,26],{"class":245},[239,462,463],{"class":253},"-0.6",[239,465,26],{"class":245},[239,467,468],{"class":253},"0.66",[239,470,26],{"class":245},[239,472,394],{"class":253},[239,474,441],{"class":245},[239,476,477],{"class":369},"\u002F* wind-up departure *\u002F\n",[239,479,481],{"class":241,"line":480},13,[239,482,483],{"class":245},"  }\n",[239,485,487],{"class":241,"line":486},14,[239,488,490],{"emptyLinePlaceholder":489},true,"\n",[239,492,494,497,500,503,505,508,512,515,518,521,523,526,529,532,534,536,539,541,544,546,549,551,554,556,558,560],{"class":241,"line":493},15,[239,495,496],{"class":249},"  body",[239,498,499],{"class":245}," { ",[239,501,502],{"class":253},"font",[239,504,380],{"class":245},[239,506,507],{"class":253},"15",[239,509,511],{"class":510},"sHUrx","px",[239,513,514],{"class":245},"\u002F",[239,516,517],{"class":253},"1.5",[239,519,520],{"class":253}," system-ui",[239,522,26],{"class":245},[239,524,525],{"class":253},"sans-serif",[239,527,528],{"class":245},"; ",[239,530,531],{"class":253},"margin",[239,533,380],{"class":245},[239,535,517],{"class":253},[239,537,538],{"class":510},"rem",[239,540,528],{"class":245},[239,542,543],{"class":253},"display",[239,545,380],{"class":245},[239,547,548],{"class":253},"grid",[239,550,528],{"class":245},[239,552,553],{"class":253},"gap",[239,555,380],{"class":245},[239,557,394],{"class":253},[239,559,538],{"class":510},[239,561,562],{"class":245},"; }\n",[239,564,566],{"class":241,"line":565},16,[239,567,490],{"emptyLinePlaceholder":489},[239,569,571,574],{"class":241,"line":570},17,[239,572,573],{"class":253},"  .lane",[239,575,363],{"class":245},[239,577,579,582,585],{"class":241,"line":578},18,[239,580,581],{"class":253},"    container-type",[239,583,584],{"class":245},": inline-size;   ",[239,586,587],{"class":369},"\u002F* so the travel distance can use cqi *\u002F\n",[239,589,591,594,596,599],{"class":241,"line":590},19,[239,592,593],{"class":253},"    position",[239,595,380],{"class":245},[239,597,598],{"class":253},"relative",[239,600,601],{"class":245},";\n",[239,603,605,608,610,613,615],{"class":241,"line":604},20,[239,606,607],{"class":253},"    height",[239,609,380],{"class":245},[239,611,612],{"class":253},"3",[239,614,538],{"class":510},[239,616,601],{"class":245},[239,618,620,623,625,628,630],{"class":241,"line":619},21,[239,621,622],{"class":253},"    border-radius",[239,624,380],{"class":245},[239,626,627],{"class":253},"8",[239,629,511],{"class":510},[239,631,601],{"class":245},[239,633,635,638,640,643],{"class":241,"line":634},22,[239,636,637],{"class":253},"    background",[239,639,380],{"class":245},[239,641,642],{"class":253},"#f1f5f9",[239,644,601],{"class":245},[239,646,648,651,653,656],{"class":241,"line":647},23,[239,649,650],{"class":253},"    overflow",[239,652,380],{"class":245},[239,654,655],{"class":253},"hidden",[239,657,601],{"class":245},[239,659,661],{"class":241,"line":660},24,[239,662,483],{"class":245},[239,664,666],{"class":241,"line":665},25,[239,667,490],{"emptyLinePlaceholder":489},[239,669,671,674],{"class":241,"line":670},26,[239,672,673],{"class":253},"  .chip",[239,675,363],{"class":245},[239,677,679,681,683,686],{"class":241,"line":678},27,[239,680,593],{"class":253},[239,682,380],{"class":245},[239,684,685],{"class":253},"absolute",[239,687,601],{"class":245},[239,689,691,694,696,698,700],{"class":241,"line":690},28,[239,692,693],{"class":253},"    inset-block",[239,695,380],{"class":245},[239,697,120],{"class":253},[239,699,538],{"class":510},[239,701,601],{"class":245},[239,703,705,708,710,712,714],{"class":241,"line":704},29,[239,706,707],{"class":253},"    left",[239,709,380],{"class":245},[239,711,120],{"class":253},[239,713,538],{"class":510},[239,715,601],{"class":245},[239,717,719,722,724,727,729],{"class":241,"line":718},30,[239,720,721],{"class":253},"    width",[239,723,380],{"class":245},[239,725,726],{"class":253},"5",[239,728,538],{"class":510},[239,730,601],{"class":245},[239,732,734,736,738,741,743],{"class":241,"line":733},31,[239,735,622],{"class":253},[239,737,380],{"class":245},[239,739,740],{"class":253},"6",[239,742,511],{"class":510},[239,744,601],{"class":245},[239,746,748,750,752,755],{"class":241,"line":747},32,[239,749,637],{"class":253},[239,751,380],{"class":245},[239,753,754],{"class":253},"#4f46e5",[239,756,601],{"class":245},[239,758,760,763,765,768],{"class":241,"line":759},33,[239,761,762],{"class":253},"    color",[239,764,380],{"class":245},[239,766,767],{"class":253},"#ffffff",[239,769,601],{"class":245},[239,771,773,776,778,780],{"class":241,"line":772},34,[239,774,775],{"class":253},"    display",[239,777,380],{"class":245},[239,779,548],{"class":253},[239,781,601],{"class":245},[239,783,785,788,790,793],{"class":241,"line":784},35,[239,786,787],{"class":253},"    place-items",[239,789,380],{"class":245},[239,791,792],{"class":253},"center",[239,794,601],{"class":245},[239,796,798,801,803,806,808],{"class":241,"line":797},36,[239,799,800],{"class":253},"    font-size",[239,802,380],{"class":245},[239,804,805],{"class":253},"0.8",[239,807,538],{"class":510},[239,809,601],{"class":245},[239,811,813,816,819,822,825,828,831],{"class":241,"line":812},37,[239,814,815],{"class":253},"    animation",[239,817,818],{"class":245},": arrive ",[239,820,821],{"class":253},"1.8",[239,823,824],{"class":510},"s",[239,826,827],{"class":253}," infinite",[239,829,830],{"class":253}," alternate",[239,832,601],{"class":245},[239,834,836],{"class":241,"line":835},38,[239,837,483],{"class":245},[239,839,841],{"class":241,"line":840},39,[239,842,490],{"emptyLinePlaceholder":489},[239,844,846],{"class":241,"line":845},40,[239,847,848],{"class":369},"  \u002F* The chip travels across the lane and back. alternate makes the\n",[239,850,852],{"class":241,"line":851},41,[239,853,854],{"class":369},"     return trip play the curve in reverse, so overshoot on arrival\n",[239,856,858],{"class":241,"line":857},42,[239,859,860],{"class":369},"     becomes anticipation on departure automatically. *\u002F\n",[239,862,864,867,870],{"class":241,"line":863},43,[239,865,866],{"class":510},"  @keyframes",[239,868,869],{"class":376}," arrive",[239,871,363],{"class":245},[239,873,875,878,880,883,885,888,891],{"class":241,"line":874},44,[239,876,877],{"class":253},"    from",[239,879,499],{"class":245},[239,881,882],{"class":253},"translate",[239,884,380],{"class":245},[239,886,887],{"class":253},"0",[239,889,890],{"class":253}," 0",[239,892,562],{"class":245},[239,894,896,899,902,904,906,909,911,914,917,920,923,925,928,930,933],{"class":241,"line":895},45,[239,897,898],{"class":253},"    to",[239,900,901],{"class":245},"   { ",[239,903,882],{"class":253},[239,905,380],{"class":245},[239,907,908],{"class":253},"calc",[239,910,386],{"class":245},[239,912,913],{"class":253},"100",[239,915,916],{"class":510},"cqi",[239,918,919],{"class":510}," -",[239,921,922],{"class":253}," 7",[239,924,538],{"class":510},[239,926,927],{"class":245},") ",[239,929,887],{"class":253},[239,931,932],{"class":245},"; }   ",[239,934,935],{"class":369},"\u002F* lane width minus chip and margins *\u002F\n",[239,937,939],{"class":241,"line":938},46,[239,940,483],{"class":245},[239,942,944],{"class":241,"line":943},47,[239,945,490],{"emptyLinePlaceholder":489},[239,947,949,952,954,957,959,962,964,967],{"class":241,"line":948},48,[239,950,951],{"class":253},"  .chip--standard",[239,953,901],{"class":245},[239,955,956],{"class":253},"animation-timing-function",[239,958,380],{"class":245},[239,960,961],{"class":253},"var",[239,963,386],{"class":245},[239,965,966],{"class":376},"--ease-standard",[239,968,969],{"class":245},"); }\n",[239,971,973,976,979,981,983,985,987,990],{"class":241,"line":972},49,[239,974,975],{"class":253},"  .chip--overshoot",[239,977,978],{"class":245},"  { ",[239,980,956],{"class":253},[239,982,380],{"class":245},[239,984,961],{"class":253},[239,986,386],{"class":245},[239,988,989],{"class":376},"--ease-overshoot",[239,991,969],{"class":245},[239,993,995,998,1000,1002,1004,1006,1008,1011],{"class":241,"line":994},50,[239,996,997],{"class":253},"  .chip--anticipate",[239,999,499],{"class":245},[239,1001,956],{"class":253},[239,1003,380],{"class":245},[239,1005,961],{"class":253},[239,1007,386],{"class":245},[239,1009,1010],{"class":376},"--ease-anticipate",[239,1012,969],{"class":245},[239,1014,1016],{"class":241,"line":1015},51,[239,1017,490],{"emptyLinePlaceholder":489},[239,1019,1021,1024],{"class":241,"line":1020},52,[239,1022,1023],{"class":510},"  @media",[239,1025,1026],{"class":245}," (prefers-reduced-motion: reduce) {\n",[239,1028,1030,1033,1035,1038,1040,1042],{"class":241,"line":1029},53,[239,1031,1032],{"class":253},"    .chip",[239,1034,499],{"class":245},[239,1036,1037],{"class":253},"animation",[239,1039,380],{"class":245},[239,1041,116],{"class":253},[239,1043,562],{"class":245},[239,1045,1047],{"class":241,"line":1046},54,[239,1048,483],{"class":245},[239,1050,1052,1055,1057],{"class":241,"line":1051},55,[239,1053,1054],{"class":245},"\u003C\u002F",[239,1056,352],{"class":249},[239,1058,257],{"class":245},[239,1060,1062,1064,1066],{"class":241,"line":1061},56,[239,1063,1054],{"class":245},[239,1065,285],{"class":249},[239,1067,257],{"class":245},[239,1069,1071,1073,1076],{"class":241,"line":1070},57,[239,1072,263],{"class":245},[239,1074,1075],{"class":249},"body",[239,1077,257],{"class":245},[239,1079,1081,1084,1087,1090,1092,1095,1098,1100,1102,1104,1107,1110,1112,1115,1117],{"class":241,"line":1080},58,[239,1082,1083],{"class":245},"  \u003C",[239,1085,1086],{"class":249},"div",[239,1088,1089],{"class":253}," class",[239,1091,271],{"class":245},[239,1093,1094],{"class":274},"\"lane\"",[239,1096,1097],{"class":245},">\u003C",[239,1099,239],{"class":249},[239,1101,1089],{"class":253},[239,1103,271],{"class":245},[239,1105,1106],{"class":274},"\"chip chip--standard\"",[239,1108,1109],{"class":245},">standard\u003C\u002F",[239,1111,239],{"class":249},[239,1113,1114],{"class":245},">\u003C\u002F",[239,1116,1086],{"class":249},[239,1118,257],{"class":245},[239,1120,1122,1124,1126,1128,1130,1132,1134,1136,1138,1140,1143,1146,1148,1150,1152],{"class":241,"line":1121},59,[239,1123,1083],{"class":245},[239,1125,1086],{"class":249},[239,1127,1089],{"class":253},[239,1129,271],{"class":245},[239,1131,1094],{"class":274},[239,1133,1097],{"class":245},[239,1135,239],{"class":249},[239,1137,1089],{"class":253},[239,1139,271],{"class":245},[239,1141,1142],{"class":274},"\"chip chip--overshoot\"",[239,1144,1145],{"class":245},">overshoot\u003C\u002F",[239,1147,239],{"class":249},[239,1149,1114],{"class":245},[239,1151,1086],{"class":249},[239,1153,257],{"class":245},[239,1155,1157,1159,1161,1163,1165,1167,1169,1171,1173,1175,1178,1181,1183,1185,1187],{"class":241,"line":1156},60,[239,1158,1083],{"class":245},[239,1160,1086],{"class":249},[239,1162,1089],{"class":253},[239,1164,271],{"class":245},[239,1166,1094],{"class":274},[239,1168,1097],{"class":245},[239,1170,239],{"class":249},[239,1172,1089],{"class":253},[239,1174,271],{"class":245},[239,1176,1177],{"class":274},"\"chip chip--anticipate\"",[239,1179,1180],{"class":245},">anticipate\u003C\u002F",[239,1182,239],{"class":249},[239,1184,1114],{"class":245},[239,1186,1086],{"class":249},[239,1188,257],{"class":245},[239,1190,1192,1194,1196],{"class":241,"line":1191},61,[239,1193,1054],{"class":245},[239,1195,1075],{"class":249},[239,1197,257],{"class":245},[239,1199,1201,1203,1205],{"class":241,"line":1200},62,[239,1202,1054],{"class":245},[239,1204,234],{"class":249},[239,1206,257],{"class":245},[20,1208,1209,1210,1212,1213,1216,1217,1219],{},"Naming the curves as tokens is the most important habit on this page. ",[15,1211,989],{}," tells the next developer ",[38,1214,1215],{},"why"," the curve exists; ",[15,1218,190],{}," pasted into twelve rules tells them nothing and drifts into twelve slightly different values. Tokens also make it possible to tone the whole interface down later by editing one line.",[61,1221,1223],{"id":1222},"the-key-technique-reversal-swaps-the-effect","The key technique: reversal swaps the effect",[20,1225,1226,1227,1230],{},"A subtle and useful property of Bezier easing: playing a curve backwards turns overshoot into anticipation. With ",[15,1228,1229],{},"animation-direction: alternate",", or when a transition reverses because a hover ends, the browser plays the same curve in reverse time. An element that overshoots on arrival will therefore wind up — dip slightly past its starting position — before leaving.",[85,1232,92,1235,92,1238,92,1241,92,1244,92,1250,92,1254,92,1257,92,1262,92,1266,92,1269,92,1272,92,1276,92,1282],{"viewBox":1233,"role":88,"ariaLabel":1234,"xmlns":90,"style":91},"0 0 720 280","An overshooting arrival curve and the same curve reversed, which produces anticipation on departure",[94,1236,1237],{},"Reversing a curve swaps its character",[98,1239,1240],{},"Left, the forward curve overshoots near its end as the element arrives. Right, the same curve played backwards starts with a small dip past the origin before descending, which reads as anticipation.",[102,1242,1243],{"textAnchor":104,"x":105,"y":106,"style":107},"Forward overshoot = reverse anticipation",[241,1245],{"x1":1246,"y1":1247,"x2":1248,"y2":1247,"stroke":117,"strokeWidth":517,"opacity":1249},"60","240","320","0.6",[241,1251],{"x1":1246,"y1":1252,"x2":1248,"y2":1252,"stroke":117,"strokeDashArray":1253,"opacity":120},"80",[119,119],[122,1255],{"d":1256,"fill":116,"stroke":125,"strokeWidth":119},"M60 240 C130 40 170 30 320 80",[102,1258,1261],{"textAnchor":104,"x":1259,"y":1260,"style":130},"190","266","arriving: overshoots the end",[241,1263],{"x1":1264,"y1":1247,"x2":1265,"y2":1247,"stroke":117,"strokeWidth":517,"opacity":1249},"400","660",[241,1267],{"x1":1264,"y1":1252,"x2":1265,"y2":1252,"stroke":117,"strokeDashArray":1268,"opacity":120},[119,119],[122,1270],{"d":1271,"fill":116,"stroke":125,"strokeWidth":119},"M400 80 C550 30 590 40 660 240",[102,1273,1275],{"textAnchor":104,"x":1274,"y":1260,"style":130},"530","leaving: winds up first",[102,1277,1278],{"textAnchor":1278,"x":1279,"y":1280,"style":1281},"end","44","84","text-anchor:end;fill:currentColor;font:11px ui-monospace,monospace",[102,1283,1285],{"textAnchor":1278,"x":1284,"y":1280,"style":1281},"384","start",[20,1287,1288,1289,1292],{},"For transitions this is usually what you want — a hover-lift that overshoots upward on enter will dip slightly on leave, which feels coherent. When it is not, give the two states different timing functions. The timing function declared on the state being ",[38,1290,1291],{},"entered"," governs that direction, so:",[230,1294,1298],{"className":1295,"code":1296,"language":1297,"meta":235,"style":235},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".card {\n  \u002F* Leaving the hover state: calm, no wind-up. *\u002F\n  transition: translate 0.2s var(--ease-standard);\n}\n\n.card:hover,\n.card:focus-visible {\n  translate: 0 -4px;\n  \u002F* Entering the hover state: a small emphatic overshoot. *\u002F\n  transition: translate 0.35s var(--ease-overshoot);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .card, .card:hover, .card:focus-visible { transition: none; }\n}\n","css",[15,1299,1300,1307,1312,1335,1340,1344,1352,1359,1375,1380,1399,1403,1407,1414,1438],{"__ignoreMap":235},[239,1301,1302,1305],{"class":241,"line":242},[239,1303,1304],{"class":253},".card",[239,1306,363],{"class":245},[239,1308,1309],{"class":241,"line":260},[239,1310,1311],{"class":369},"  \u002F* Leaving the hover state: calm, no wind-up. *\u002F\n",[239,1313,1314,1317,1320,1323,1325,1328,1330,1332],{"class":241,"line":280},[239,1315,1316],{"class":253},"  transition",[239,1318,1319],{"class":245},": translate ",[239,1321,1322],{"class":253},"0.2",[239,1324,824],{"class":510},[239,1326,1327],{"class":253}," var",[239,1329,386],{"class":245},[239,1331,966],{"class":376},[239,1333,1334],{"class":245},");\n",[239,1336,1337],{"class":241,"line":290},[239,1338,1339],{"class":245},"}\n",[239,1341,1342],{"class":241,"line":308},[239,1343,490],{"emptyLinePlaceholder":489},[239,1345,1346,1349],{"class":241,"line":333},[239,1347,1348],{"class":253},".card:hover",[239,1350,1351],{"class":245},",\n",[239,1353,1354,1357],{"class":241,"line":347},[239,1355,1356],{"class":253},".card:focus-visible",[239,1358,363],{"class":245},[239,1360,1361,1364,1366,1368,1371,1373],{"class":241,"line":357},[239,1362,1363],{"class":253},"  translate",[239,1365,380],{"class":245},[239,1367,887],{"class":253},[239,1369,1370],{"class":253}," -4",[239,1372,511],{"class":510},[239,1374,601],{"class":245},[239,1376,1377],{"class":241,"line":366},[239,1378,1379],{"class":369},"  \u002F* Entering the hover state: a small emphatic overshoot. *\u002F\n",[239,1381,1382,1384,1386,1389,1391,1393,1395,1397],{"class":241,"line":373},[239,1383,1316],{"class":253},[239,1385,1319],{"class":245},[239,1387,1388],{"class":253},"0.35",[239,1390,824],{"class":510},[239,1392,1327],{"class":253},[239,1394,386],{"class":245},[239,1396,989],{"class":376},[239,1398,1334],{"class":245},[239,1400,1401],{"class":241,"line":412},[239,1402,1339],{"class":245},[239,1404,1405],{"class":241,"line":447},[239,1406,490],{"emptyLinePlaceholder":489},[239,1408,1409,1412],{"class":241,"line":480},[239,1410,1411],{"class":510},"@media",[239,1413,1026],{"class":245},[239,1415,1416,1419,1421,1423,1425,1427,1429,1432,1434,1436],{"class":241,"line":486},[239,1417,1418],{"class":253},"  .card",[239,1420,26],{"class":245},[239,1422,1348],{"class":253},[239,1424,26],{"class":245},[239,1426,1356],{"class":253},[239,1428,499],{"class":245},[239,1430,1431],{"class":253},"transition",[239,1433,380],{"class":245},[239,1435,116],{"class":253},[239,1437,562],{"class":245},[239,1439,1440],{"class":241,"line":493},[239,1441,1339],{"class":245},[20,1443,1444,1445,1449],{},"The asymmetry also follows a broader principle covered in ",[50,1446,1448],{"href":1447},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing\u002F","Entry vs Exit Easing",": arrivals can afford personality, departures should get out of the way quickly.",[61,1451,1453],{"id":1452},"tuning-a-curve-by-eye","Tuning a curve by eye",[20,1455,1456],{},"Numbers alone rarely produce the right feel; tuning is visual. A reliable workflow:",[1458,1459,1460,1470,1479,1492,1498],"ol",{},[177,1461,1462,1465,1466,1469],{},[180,1463,1464],{},"Start from a neutral ease-out"," that already works for the element, such as ",[15,1467,1468],{},"cubic-bezier(0.22, 1, 0.36, 1)",".",[177,1471,1472,1478],{},[180,1473,1474,1475,1477],{},"Raise ",[15,1476,186],{}," in small steps"," — 1.1, 1.2, 1.3 — and replay the animation at real speed each time. Stop one step before the overshoot becomes the first thing you notice. The best overshoots are felt rather than seen.",[177,1480,1481,1488,1489,1491],{},[180,1482,1483,1484,1487],{},"Adjust ",[15,1485,1486],{},"x2"," to move the peak."," Smaller ",[15,1490,1486],{}," values put the overshoot earlier, which feels snappier; larger values delay it, which feels floatier.",[177,1493,1494,1497],{},[180,1495,1496],{},"Check at the largest real distance."," If the element sometimes travels much further — a panel on a wide screen — replay at that distance and back the curve off if needed, or use a container-relative distance so the overshoot scales with it.",[177,1499,1500,1503],{},[180,1501,1502],{},"Check with reduced motion enabled"," to confirm the fallback is a plain, quick transition rather than an abrupt jump.",[20,1505,1506,1507,1509],{},"Chromium and Firefox DevTools both include a Bezier editor: click the curve swatch next to any ",[15,1508,17],{}," value in the Styles pane to drag control points and preview the result live. It is the fastest way to find a curve, after which the numbers go into a token.",[61,1511,1513],{"id":1512},"where-character-easing-backfires","Where character easing backfires",[174,1515,1516,1522,1533,1546,1569],{},[177,1517,1518,1521],{},[180,1519,1520],{},"Frequent, small interactions."," Menu items, list hovers, form focus. Users trigger these dozens of times a minute; a bounce on each becomes tiresome.",[177,1523,1524,1527,1528,1532],{},[180,1525,1526],{},"Large distances."," A drawer that overshoots by 30 pixels looks broken. Use a gentler curve, or a spring from ",[50,1529,1531],{"href":1530},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Flinear-easing-function-for-springs\u002F","linear()"," tuned for the distance.",[177,1534,1535,210,1538,1541,1542,1545],{},[180,1536,1537],{},"Clamped properties.",[15,1539,1540],{},"opacity",", colours and ",[15,1543,1544],{},"clip-path"," insets cannot usefully exceed their end value. Overshoot on them produces nothing visible except a sharper ease-out.",[177,1547,1548,1551,1552,1555,1556,1559,1560,26,1562,1565,1566,1469],{},[180,1549,1550],{},"Layout properties."," Overshooting ",[15,1553,1554],{},"height"," or ",[15,1557,1558],{},"width"," reflows the page twice per animation — once past the target, once back — and shifts surrounding content. Keep character easing on ",[15,1561,882],{},[15,1563,1564],{},"scale"," and ",[15,1567,1568],{},"rotate",[177,1570,1571,1574],{},[180,1572,1573],{},"Error states."," Anticipation reads as hesitation. Do not apply it to confirmation or error feedback, where immediacy matters.",[61,1576,1578],{"id":1577},"browser-support","Browser support",[20,1580,1581,1583,1584,1586,1587,1590,1591,1594],{},[15,1582,17],{}," with y values outside 0–1 is supported in every browser that supports CSS transitions, which is universal: transitions date from Chrome 26, Edge 12, Firefox 16 and Safari 9. The standalone ",[15,1585,882],{}," property used here is supported in Chrome and Edge 104+, Firefox 72+ and Safari 14.1+; ",[15,1588,1589],{},"transform: translate()"," behaves identically in older engines. ",[15,1592,1593],{},"prefers-reduced-motion"," is supported in Chrome 74+, Edge 79+, Firefox 63+ and Safari 10.1+.",[61,1596,1598],{"id":1597},"faq","FAQ",[20,1600,1601,1607,1608,1610],{},[180,1602,1603,1604,1606],{},"How do I make a ",[15,1605,383],{}," overshoot?","\nGive the second control point a y value greater than 1, as in ",[15,1609,190],{},". The curve then passes above the end value before returning to it, so an element travels slightly past its target and settles back.",[20,1612,1613,1616],{},[180,1614,1615],{},"What is anticipation in animation?","\nA small movement in the opposite direction before the main movement, like a crouch before a jump. In CSS it comes from a first control point with a y value below 0, which makes progress dip negative at the start before accelerating toward the end.",[20,1618,1619,1625],{},[180,1620,1621,1622,1624],{},"Can the x values of ",[15,1623,383],{}," go outside 0 to 1?","\nNo. The x coordinates represent time and must stay within 0 and 1, otherwise the declaration is invalid. Only the y coordinates, which represent progress, may go beyond that range.",[20,1627,1628,1634,1636,1637,26,1639,1565,1641,1469],{},[180,1629,1630,1631,1633],{},"Why does my overshoot look wrong on ",[15,1632,1540],{},"?",[15,1635,1540],{}," is clamped to the range 0 to 1, so progress above 1 has no visible effect and the curve just looks like a sharp ease-out. Overshoot only reads on properties that can exceed their end value, such as ",[15,1638,882],{},[15,1640,1564],{},[15,1642,1568],{},[61,1644,1646],{"id":1645},"related","Related",[174,1648,1649,1654,1660,1665,1672],{},[177,1650,1651,1653],{},[50,1652,53],{"href":52}," — the parent guide.",[177,1655,1656,1659],{},[50,1657,1658],{"href":1530},"Spring and Bounce Easing With linear()"," — when one overshoot is not enough.",[177,1661,1662,1664],{},[50,1663,1448],{"href":1447}," — pairing curves per direction.",[177,1666,1667,1671],{},[50,1668,1670],{"href":1669},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fsmooth-hover-effects-without-javascript\u002F","Smooth Hover Effects Without JavaScript"," — applying these curves to hover states.",[177,1673,1674,1678],{},[50,1675,1677],{"href":1676},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-that-scales-with-container-size\u002F","Motion That Scales With Container Size"," — keeping overshoot proportional to distance.",[352,1680,1681],{},"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 .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 .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}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":235,"searchDepth":260,"depth":260,"links":1683},[1684,1685,1686,1687,1688,1689,1690,1691,1692],{"id":63,"depth":260,"text":64},{"id":76,"depth":260,"text":77},{"id":220,"depth":260,"text":221},{"id":1222,"depth":260,"text":1223},{"id":1452,"depth":260,"text":1453},{"id":1512,"depth":260,"text":1513},{"id":1577,"depth":260,"text":1578},{"id":1597,"depth":260,"text":1598},{"id":1645,"depth":260,"text":1646},"Give UI motion character with cubic-bezier control points above 1 and below 0: overshoot for arrivals, anticipation for departures, and where each backfires.","md",{"pageTitle":1696,"datePublished":1697,"dateModified":1697,"faq":1698},"Overshoot and Anticipation With cubic-bezier","2026-09-18",[1699,1702,1704,1707],{"q":1700,"a":1701},"How do I make a cubic-bezier overshoot?","Give the second control point a y value greater than 1, as in cubic-bezier(0.34, 1.56, 0.64, 1). The curve then passes above the end value before returning to it, so an element travels slightly past its target and settles back.",{"q":1615,"a":1703},"A small movement in the opposite direction before the main movement, like a crouch before a jump. In CSS it comes from a first control point with a y value below 0, which makes progress dip negative at the start before accelerating toward the end.",{"q":1705,"a":1706},"Can the x values of cubic-bezier go outside 0 to 1?","No. The x coordinates represent time and must stay within 0 and 1, otherwise the declaration is invalid. Only the y coordinates, which represent progress, may go beyond that range.",{"q":1708,"a":1709},"Why does my overshoot look wrong on opacity?","opacity is clamped to the range 0 to 1, so progress above 1 has no visible effect and the curve just looks like a sharp ease-out. Overshoot only reads on properties that can exceed their end value, such as translate, scale and rotate.","\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation",{"title":5,"description":1693},"css-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation\u002Findex","Z82d1R0mxcZG2YI8chJhGNjBJ-VwZ1XKstDlsIZLpgg",[1715,1718,1721,1724,1727,1730,1733,1736,1739,1742,1745,1748,1751,1754,1757,1760,1763,1766,1769,1772,1775,1778,1781,1784,1787,1790,1793,1796,1799,1802,1805,1808,1811,1814,1817,1820,1823,1826,1829,1832,1835,1838,1841,1844,1847,1850,1853,1856,1859,1862,1863,1866,1869,1872,1875,1878,1881,1884,1887,1890,1893,1896,1899,1902,1905,1908,1911,1914,1917,1920,1923,1926,1929,1932,1935,1938,1941,1944,1947,1950,1953,1956,1959,1962,1965,1968,1971,1974,1977,1980,1983,1986,1989,1992,1994,1997,2000,2003,2006,2009,2012,2015,2018,2021,2024,2027,2030,2033,2036,2039,2042,2045,2048,2051,2054,2057,2060,2063,2066,2069,2072,2075,2078,2081,2084,2087,2090,2093,2096,2099,2102,2105,2108,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,2216,2219,2222,2225,2228,2231,2234,2237,2240,2243,2246,2249,2252,2255,2258,2261,2264,2267,2270],{"path":1716,"title":1717},"\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":1719,"title":1720},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1722,"title":1723},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1725,"title":1726},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1728,"title":1729},"\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":1731,"title":1732},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1734,"title":1735},"\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":1737,"title":1738},"\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":1740,"title":1741},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1743,"title":1744},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1746,"title":1747},"\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":1749,"title":1750},"\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":1752,"title":1753},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1755,"title":1756},"\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":1758,"title":1759},"\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":1761,"title":1762},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1764,"title":1765},"\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":1767,"title":1768},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1770,"title":1771},"\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":1773,"title":1774},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1776,"title":1777},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1779,"title":1780},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1782,"title":1783},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1785,"title":1786},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1788,"title":1789},"\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":1791,"title":1792},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1794,"title":1795},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1797,"title":1798},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1800,"title":1801},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1803,"title":1804},"\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":1806,"title":1807},"\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":1809,"title":1810},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1812,"title":1813},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1815,"title":1816},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1818,"title":1819},"\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":1821,"title":1822},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1824,"title":1825},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1827,"title":1828},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1830,"title":1831},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1833,"title":1834},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1836,"title":1837},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1839,"title":1840},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1842,"title":1843},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1845,"title":1846},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1848,"title":1849},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1851,"title":1852},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1854,"title":1855},"\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":1857,"title":1858},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1860,"title":1861},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1710,"title":5},{"path":1864,"title":1865},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1867,"title":1868},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1870,"title":1871},"\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":1873,"title":1874},"\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":1876,"title":1877},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1879,"title":1880},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1882,"title":1883},"\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":1885,"title":1886},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1888,"title":1889},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fhover-intent-delays-with-transition-delay","Hover Intent Delays With transition-delay: Menus That Don't Flicker",{"path":1891,"title":1892},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1894,"title":1895},"\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":1897,"title":1898},"\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":1900,"title":1901},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":1903,"title":1904},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":1906,"title":1907},"\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":1909,"title":1910},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":1912,"title":1913},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":1915,"title":1916},"\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":1918,"title":1919},"\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":1921,"title":1922},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":1924,"title":1925},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":1927,"title":1928},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":1930,"title":1931},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":1933,"title":1934},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":1936,"title":1937},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":1939,"title":1940},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":1942,"title":1943},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":1945,"title":1946},"\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":1948,"title":1949},"\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":1951,"title":1952},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":1954,"title":1955},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":1957,"title":1958},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":1960,"title":1961},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":1963,"title":1964},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":1966,"title":1967},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":1969,"title":1970},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":1972,"title":1973},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":1975,"title":1976},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":1978,"title":1979},"\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":1981,"title":1982},"\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":1984,"title":1985},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":1987,"title":1988},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":1990,"title":1991},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":514,"title":1993},"Modern CSS Layouts & Micro-Interactions",{"path":1995,"title":1996},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":1998,"title":1999},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2001,"title":2002},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":2004,"title":2005},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2007,"title":2008},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2010,"title":2011},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":2013,"title":2014},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":2016,"title":2017},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":2019,"title":2020},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2022,"title":2023},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2025,"title":2026},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2028,"title":2029},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":2031,"title":2032},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":2034,"title":2035},"\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":2037,"title":2038},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":2040,"title":2041},"\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":2043,"title":2044},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2046,"title":2047},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2049,"title":2050},"\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":2052,"title":2053},"\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":2055,"title":2056},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2058,"title":2059},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2061,"title":2062},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2064,"title":2065},"\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":2067,"title":2068},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":2070,"title":2071},"\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":2073,"title":2074},"\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":2076,"title":2077},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2079,"title":2080},"\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":2082,"title":2083},"\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":2085,"title":2086},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2088,"title":2089},"\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":2091,"title":2092},"\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":2094,"title":2095},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2097,"title":2098},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2100,"title":2101},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2103,"title":2104},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2106,"title":2107},"\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":2109,"title":2110},"\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":2112,"title":2113},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2115,"title":2116},"\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":2118,"title":2119},"\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":2121,"title":2122},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2124,"title":2125},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2127,"title":2128},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2130,"title":2131},"\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":2133,"title":2134},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":2136,"title":2137},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2139,"title":2140},"\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":2142,"title":2143},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2145,"title":2146},"\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":2148,"title":2149},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2151,"title":2152},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2154,"title":2155},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2157,"title":2158},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2160,"title":2161},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2163,"title":2164},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2166,"title":2167},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2169,"title":2170},"\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":2172,"title":2173},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2175,"title":2176},"\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":2178,"title":2179},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2181,"title":2182},"\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":2184,"title":2185},"\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":2187,"title":2188},"\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":2190,"title":2191},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2193,"title":2194},"\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":2196,"title":2197},"\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":2199,"title":2200},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2202,"title":2203},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2205,"title":2206},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2208,"title":2209},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2211,"title":2212},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2214,"title":2215},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2217,"title":2218},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2220,"title":2221},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2223,"title":2224},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2226,"title":2227},"\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":2229,"title":2230},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2232,"title":2233},"\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":2235,"title":2236},"\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":2238,"title":2239},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2241,"title":2242},"\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":2244,"title":2245},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2247,"title":2248},"\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":2250,"title":2251},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2253,"title":2254},"\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":2256,"title":2257},"\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":2259,"title":2260},"\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":2262,"title":2263},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2265,"title":2266},"\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":2268,"title":2269},"\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":2271,"title":2272},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2274,"caption":2275,"height":2276,"resizable":489,"html":2277,"css":2278},"Standard, overshoot and anticipation curves on the same trip","Each chip crosses its lane and returns: overshoot sails past the far end, and the reversed curve winds up before leaving.",240,"\n\u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--standard\">standard\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--overshoot\">overshoot\u003C\u002Fspan>\u003C\u002Fdiv>\n\u003Cdiv class=\"lane\">\u003Cspan class=\"chip chip--anticipate\">anticipate\u003C\u002Fspan>\u003C\u002Fdiv>","\n:root {\n  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);\n  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);\n  --ease-anticipate: cubic-bezier(0.36, -0.6, 0.66, 1);\n}\nbody { display: grid; gap: 1rem; align-content: center; }\n.lane { container-type: inline-size; position: relative; height: 3rem; border-radius: 8px; background: var(--demo-surface); overflow: hidden; }\n.chip {\n  position: absolute;\n  inset-block: 0.5rem;\n  left: 0.5rem;\n  width: 5rem;\n  border-radius: 6px;\n  background: var(--demo-accent);\n  color: #ffffff;\n  display: grid;\n  place-items: center;\n  font-size: 0.8rem;\n  animation: arrive 1.8s infinite alternate;\n}\n@keyframes arrive {\n  from { translate: 0 0; }\n  to { translate: calc(100cqi - 7rem) 0; }\n}\n.chip--standard { animation-timing-function: var(--ease-standard); }\n.chip--overshoot { animation-timing-function: var(--ease-overshoot); }\n.chip--anticipate { animation-timing-function: var(--ease-anticipate); }\n@media (prefers-reduced-motion: reduce) { .chip { animation: none; } }",1789717746651]