[{"data":1,"prerenderedAt":2384},["ShallowReactive",2],{"page-\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations\u002F":3,"content-all-pages":1819,"live-demo:clip-reveals":2378},{"id":4,"title":5,"body":6,"description":1798,"extension":1799,"meta":1800,"navigation":432,"path":1815,"seo":1816,"stem":1817,"__hash__":1818},"content\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations\u002Findex.md","Clip-Path Reveal Animations: Wipes, Irises and Corners Without Extra Markup",{"type":7,"value":8,"toc":1787},"minimark",[9,13,33,38,52,55,58,62,67,168,217,221,224,228,1367,1385,1389,1397,1462,1469,1476,1480,1483,1493,1503,1521,1535,1539,1547,1645,1654,1658,1680,1684,1711,1730,1739,1754,1758,1784],[10,11,5],"h1",{"id":12},"clip-path-reveal-animations-wipes-irises-and-corners-without-extra-markup",[14,15,16,17,21,22,27,28,32],"p",{},"A reveal draws attention to content arriving — a heading wiping in, an image opening from a point, a panel sliding into view — without the element itself moving. Opacity fades are soft and forgettable; translations move the element and can trigger layout concerns. Clipping sits between them: the element stays exactly where it is while the visible region grows. The narrow problem this page solves is building those reveals with ",[18,19,20],"code",{},"clip-path"," alone, getting the shapes to interpolate rather than jump, triggering them on hover, focus or scroll, and giving reduced-motion users an equivalent result. It belongs to ",[23,24,26],"a",{"href":25},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002F","Clip-Path & Mask Animations"," in the ",[23,29,31],{"href":30},"\u002Fcss-only-micro-interactions-animations\u002F","CSS-Only Micro-Interactions & Animations"," guide.",[34,35,37],"h2",{"id":36},"why-clip-rather-than-move-or-fade","Why clip rather than move or fade",[14,39,40,41,44,45,48,49,51],{},"Three properties can make content \"appear\", and they communicate different things. ",[18,42,43],{},"opacity"," says the content was always there and is fading into focus. ",[18,46,47],{},"transform: translate()"," says the content travelled from somewhere. ",[18,50,20],{}," says the content is being uncovered — a curtain opening, a window widening — which suits reveals of content that should feel anchored in place.",[14,53,54],{},"Clipping also has practical advantages. The element's box never changes, so nothing around it reflows, and its final position is its real position from the first frame, which keeps focus rings, anchor targets and measurement code honest. And because the unclipped content is fully rendered underneath, there is no flash of different layout when the animation ends.",[14,56,57],{},"The accessibility caveat is the same as for any motion: large reveals across much of the screen are more intense than small fades, and users who ask for reduced motion should receive the content without the sweep.",[34,59,61],{"id":60},"the-shapes-and-how-they-interpolate","The shapes and how they interpolate",[14,63,64,66],{},[18,65,20],{}," accepts basic shape functions. Only matching shapes interpolate smoothly, so the design of a reveal starts with choosing a shape that can express both its start and end states.",[68,69,75,76,75,80,75,84,75,92,75,107,75,112,75,118,75,123,75,127,75,131,75,136,75,139,75,142,75,145,75,149,75,153,75,157,75,160,75,163],"svg",{"viewBox":70,"role":71,"ariaLabel":72,"xmlns":73,"style":74},"0 0 720 320","img","Three reveal shapes: inset wipe, circle iris and polygon diagonal, each shown at start and end","http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","width:100%;height:auto;max-width:720px;margin:2rem 0","\n  ",[77,78,79],"title",{},"Three reveal families",[81,82,83],"desc",{},"An inset wipe grows from zero width at the left to full width. A circle iris grows from radius zero at the centre to a radius covering the corners. A polygon diagonal moves from a collapsed corner to a full rectangle with the same four points.",[85,86,91],"text",{"textAnchor":87,"x":88,"y":89,"style":90},"middle","360","26","text-anchor:middle;fill:currentColor;font:700 17px sans-serif","Start and end must use the same shape function",[93,94],"rect",{"x":95,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":101,"strokeWidth":102,"strokeDashArray":103,"opacity":106},"40","56","180","120","6","none","currentColor","1.5",[104,105],"5","4","0.6",[93,108],{"x":95,"y":96,"width":109,"height":98,"fill":110,"opacity":111},"70","#7aa2ff","0.5",[85,113,117],{"textAnchor":87,"x":114,"y":115,"style":116},"130","206","text-anchor:middle;fill:currentColor;font:600 12px ui-monospace,monospace","inset(0 100% 0 0)",[85,119,122],{"textAnchor":87,"x":114,"y":120,"style":121},"226","text-anchor:middle;fill:currentColor;font:12px sans-serif","→ inset(0)",[85,124,126],{"textAnchor":87,"x":114,"y":125,"style":121},"250","wipe",[93,128],{"x":129,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":101,"strokeWidth":102,"strokeDashArray":130,"opacity":106},"270",[104,105],[132,133],"circle",{"cx":88,"cy":134,"r":135,"fill":110,"opacity":111},"116","44",[85,137,138],{"textAnchor":87,"x":88,"y":115,"style":116},"circle(0 at 50% 50%)",[85,140,141],{"textAnchor":87,"x":88,"y":120,"style":121},"→ circle(75%)",[85,143,144],{"textAnchor":87,"x":88,"y":125,"style":121},"iris",[93,146],{"x":147,"y":96,"width":97,"height":98,"rx":99,"fill":100,"stroke":101,"strokeWidth":102,"strokeDashArray":148,"opacity":106},"500",[104,105],[150,151],"polygon",{"points":152,"fill":110,"opacity":111},"500,56 620,56 560,176 500,176",[85,154,156],{"textAnchor":87,"x":155,"y":115,"style":116},"590","polygon(4 points)",[85,158,159],{"textAnchor":87,"x":155,"y":120,"style":121},"→ polygon(4 points)",[85,161,162],{"textAnchor":87,"x":155,"y":125,"style":121},"diagonal",[85,164,167],{"textAnchor":87,"x":88,"y":165,"style":166},"296","text-anchor:middle;fill:currentColor;font:12px sans-serif;opacity:0.75","A circle to a polygon, or 3 points to 4, jumps instead of animating.",[169,170,171,193,209],"ul",{},[172,173,174,180,181,184,185,188,189,192],"li",{},[175,176,177],"strong",{},[18,178,179],{},"inset()"," clips to a rectangle inset from each edge, with optional rounded corners via ",[18,182,183],{},"round",". It is the workhorse for wipes: animate one edge from ",[18,186,187],{},"100%"," to ",[18,190,191],{},"0",".",[172,194,195,204,205,208],{},[175,196,197,200,201],{},[18,198,199],{},"circle()"," and ",[18,202,203],{},"ellipse()"," clip to a round shape with a position. Animate the radius from zero for an iris or spotlight. To fully cover a rectangle from its centre, the radius must reach the corners, which is about 71% of the element's diagonal reference; ",[18,206,207],{},"75%"," is a safe round number.",[172,210,211,216],{},[175,212,213],{},[18,214,215],{},"polygon()"," clips to arbitrary straight-edged shapes and interpolates point by point, so both keyframes must list the same number of points in the same order.",[34,218,220],{"id":219},"the-complete-implementation","The complete implementation",[14,222,223],{},"The page below shows three reveals: a heading that wipes in on load, a card image that irises open on hover or keyboard focus, and a diagonal panel reveal.",[225,226],"live-demo",{"name":227},"clip-reveals",[229,230,235],"pre",{"className":231,"code":232,"language":233,"meta":234,"style":234},"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>Clip-path reveals\u003C\u002Ftitle>\n\u003Cstyle>\n  body { font: 16px\u002F1.5 system-ui, sans-serif; margin: 1.5rem; display: grid; gap: 1.5rem; }\n\n  \u002F* 1. Wipe: the right inset shrinks from 100% to 0. The heading's box is\n     full width from the start, so nothing around it moves. *\u002F\n  .wipe {\n    font-size: 2rem;\n    margin: 0;\n    animation: wipe-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;\n  }\n  @keyframes wipe-in {\n    from { clip-path: inset(0 100% 0 0); }\n    to   { clip-path: inset(0 0 0 0); }\n  }\n\n  \u002F* 2. Iris on hover and focus: the image starts as a small circle and\n     opens to cover the card. A link wraps the card, so keyboard focus\n     triggers the same reveal via :focus-visible. *\u002F\n  .card { display: block; width: 16rem; color: inherit; text-decoration: none; }\n  .card__img {\n    height: 9rem;\n    border-radius: 10px;\n    background: linear-gradient(135deg, #22d3ee, #6366f1);\n    clip-path: circle(18% at 50% 50%);\n    transition: clip-path 0.45s ease;\n  }\n  .card:hover .card__img,\n  .card:focus-visible .card__img {\n    clip-path: circle(75% at 50% 50%);\n  }\n  .card:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; border-radius: 12px; }\n\n  \u002F* 3. Diagonal: four points in both states, so it interpolates.\n     The start state collapses the right edge into a sloped line. *\u002F\n  .panel {\n    padding: 1.5rem;\n    background: #0f172a;\n    color: #f8fafc;\n    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);\n    animation: diagonal-in 0.8s ease-out 0.3s both;\n  }\n  @keyframes diagonal-in {\n    to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }\n  }\n\n  \u002F* Reduced motion: no sweeping. Show the end state immediately. *\u002F\n  @media (prefers-reduced-motion: reduce) {\n    .wipe, .panel { animation: none; clip-path: none; }\n    .card__img { transition: none; }\n  }\n\u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1 class=\"wipe\">Field notes\u003C\u002Fh1>\n  \u003Ca class=\"card\" href=\"\u002Ftrips\u002Fridge\u002F\">\n    \u003Cdiv class=\"card__img\" role=\"img\" aria-label=\"Ridge at dawn\">\u003C\u002Fdiv>\n    \u003Cp>Ridge at dawn\u003C\u002Fp>\n  \u003C\u002Fa>\n  \u003Csection class=\"panel\">\u003Cp>Panel content revealed on a diagonal.\u003C\u002Fp>\u003C\u002Fsection>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[18,236,237,257,277,287,305,330,344,354,427,434,441,447,456,472,484,530,536,548,581,608,613,618,624,630,636,683,691,706,721,753,784,803,808,820,830,858,863,910,915,921,927,935,949,961,974,1013,1039,1044,1054,1102,1107,1112,1118,1127,1157,1174,1179,1189,1198,1208,1231,1255,1294,1308,1318,1349,1358],{"__ignoreMap":234},[238,239,242,246,250,254],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"suds8","\u003C!",[238,247,249],{"class":248},"sne4z","doctype",[238,251,253],{"class":252},"s-5SL"," html",[238,255,256],{"class":244},">\n",[238,258,260,263,265,268,271,275],{"class":240,"line":259},2,[238,261,262],{"class":244},"\u003C",[238,264,233],{"class":248},[238,266,267],{"class":252}," lang",[238,269,270],{"class":244},"=",[238,272,274],{"class":273},"sT6z2","\"en\"",[238,276,256],{"class":244},[238,278,280,282,285],{"class":240,"line":279},3,[238,281,262],{"class":244},[238,283,284],{"class":248},"head",[238,286,256],{"class":244},[238,288,290,292,295,298,300,303],{"class":240,"line":289},4,[238,291,262],{"class":244},[238,293,294],{"class":248},"meta",[238,296,297],{"class":252}," charset",[238,299,270],{"class":244},[238,301,302],{"class":273},"\"utf-8\"",[238,304,256],{"class":244},[238,306,308,310,312,315,317,320,323,325,328],{"class":240,"line":307},5,[238,309,262],{"class":244},[238,311,294],{"class":248},[238,313,314],{"class":252}," name",[238,316,270],{"class":244},[238,318,319],{"class":273},"\"viewport\"",[238,321,322],{"class":252}," content",[238,324,270],{"class":244},[238,326,327],{"class":273},"\"width=device-width, initial-scale=1\"",[238,329,256],{"class":244},[238,331,333,335,337,340,342],{"class":240,"line":332},6,[238,334,262],{"class":244},[238,336,77],{"class":248},[238,338,339],{"class":244},">Clip-path reveals\u003C\u002F",[238,341,77],{"class":248},[238,343,256],{"class":244},[238,345,347,349,352],{"class":240,"line":346},7,[238,348,262],{"class":244},[238,350,351],{"class":248},"style",[238,353,256],{"class":244},[238,355,357,360,363,366,369,372,376,379,381,384,387,390,393,396,398,400,403,405,408,410,413,415,418,420,422,424],{"class":240,"line":356},8,[238,358,359],{"class":248},"  body",[238,361,362],{"class":244}," { ",[238,364,365],{"class":252},"font",[238,367,368],{"class":244},": ",[238,370,371],{"class":252},"16",[238,373,375],{"class":374},"sHUrx","px",[238,377,378],{"class":244},"\u002F",[238,380,102],{"class":252},[238,382,383],{"class":252}," system-ui",[238,385,386],{"class":244},", ",[238,388,389],{"class":252},"sans-serif",[238,391,392],{"class":244},"; ",[238,394,395],{"class":252},"margin",[238,397,368],{"class":244},[238,399,102],{"class":252},[238,401,402],{"class":374},"rem",[238,404,392],{"class":244},[238,406,407],{"class":252},"display",[238,409,368],{"class":244},[238,411,412],{"class":252},"grid",[238,414,392],{"class":244},[238,416,417],{"class":252},"gap",[238,419,368],{"class":244},[238,421,102],{"class":252},[238,423,402],{"class":374},[238,425,426],{"class":244},"; }\n",[238,428,430],{"class":240,"line":429},9,[238,431,433],{"emptyLinePlaceholder":432},true,"\n",[238,435,437],{"class":240,"line":436},10,[238,438,440],{"class":439},"sLBg1","  \u002F* 1. Wipe: the right inset shrinks from 100% to 0. The heading's box is\n",[238,442,444],{"class":240,"line":443},11,[238,445,446],{"class":439},"     full width from the start, so nothing around it moves. *\u002F\n",[238,448,450,453],{"class":240,"line":449},12,[238,451,452],{"class":252},"  .wipe",[238,454,455],{"class":244}," {\n",[238,457,459,462,464,467,469],{"class":240,"line":458},13,[238,460,461],{"class":252},"    font-size",[238,463,368],{"class":244},[238,465,466],{"class":252},"2",[238,468,402],{"class":374},[238,470,471],{"class":244},";\n",[238,473,475,478,480,482],{"class":240,"line":474},14,[238,476,477],{"class":252},"    margin",[238,479,368],{"class":244},[238,481,191],{"class":252},[238,483,471],{"class":244},[238,485,487,490,493,496,499,502,505,508,510,513,515,518,520,522,525,528],{"class":240,"line":486},15,[238,488,489],{"class":252},"    animation",[238,491,492],{"class":244},": wipe-in ",[238,494,495],{"class":252},"0.7",[238,497,498],{"class":374},"s",[238,500,501],{"class":252}," cubic-bezier",[238,503,504],{"class":244},"(",[238,506,507],{"class":252},"0.22",[238,509,386],{"class":244},[238,511,512],{"class":252},"1",[238,514,386],{"class":244},[238,516,517],{"class":252},"0.36",[238,519,386],{"class":244},[238,521,512],{"class":252},[238,523,524],{"class":244},") ",[238,526,527],{"class":252},"both",[238,529,471],{"class":244},[238,531,533],{"class":240,"line":532},16,[238,534,535],{"class":244},"  }\n",[238,537,539,542,546],{"class":240,"line":538},17,[238,540,541],{"class":374},"  @keyframes",[238,543,545],{"class":544},"soyes"," wipe-in",[238,547,455],{"class":244},[238,549,551,554,556,558,560,563,565,567,570,573,576,578],{"class":240,"line":550},18,[238,552,553],{"class":252},"    from",[238,555,362],{"class":244},[238,557,20],{"class":252},[238,559,368],{"class":244},[238,561,562],{"class":252},"inset",[238,564,504],{"class":244},[238,566,191],{"class":252},[238,568,569],{"class":252}," 100",[238,571,572],{"class":374},"%",[238,574,575],{"class":252}," 0",[238,577,575],{"class":252},[238,579,580],{"class":244},"); }\n",[238,582,584,587,590,592,594,596,598,600,602,604,606],{"class":240,"line":583},19,[238,585,586],{"class":252},"    to",[238,588,589],{"class":244},"   { ",[238,591,20],{"class":252},[238,593,368],{"class":244},[238,595,562],{"class":252},[238,597,504],{"class":244},[238,599,191],{"class":252},[238,601,575],{"class":252},[238,603,575],{"class":252},[238,605,575],{"class":252},[238,607,580],{"class":244},[238,609,611],{"class":240,"line":610},20,[238,612,535],{"class":244},[238,614,616],{"class":240,"line":615},21,[238,617,433],{"emptyLinePlaceholder":432},[238,619,621],{"class":240,"line":620},22,[238,622,623],{"class":439},"  \u002F* 2. Iris on hover and focus: the image starts as a small circle and\n",[238,625,627],{"class":240,"line":626},23,[238,628,629],{"class":439},"     opens to cover the card. A link wraps the card, so keyboard focus\n",[238,631,633],{"class":240,"line":632},24,[238,634,635],{"class":439},"     triggers the same reveal via :focus-visible. *\u002F\n",[238,637,639,642,644,646,648,651,653,656,658,660,662,664,667,669,672,674,677,679,681],{"class":240,"line":638},25,[238,640,641],{"class":252},"  .card",[238,643,362],{"class":244},[238,645,407],{"class":252},[238,647,368],{"class":244},[238,649,650],{"class":252},"block",[238,652,392],{"class":244},[238,654,655],{"class":252},"width",[238,657,368],{"class":244},[238,659,371],{"class":252},[238,661,402],{"class":374},[238,663,392],{"class":244},[238,665,666],{"class":252},"color",[238,668,368],{"class":244},[238,670,671],{"class":252},"inherit",[238,673,392],{"class":244},[238,675,676],{"class":252},"text-decoration",[238,678,368],{"class":244},[238,680,100],{"class":252},[238,682,426],{"class":244},[238,684,686,689],{"class":240,"line":685},26,[238,687,688],{"class":252},"  .card__img",[238,690,455],{"class":244},[238,692,694,697,699,702,704],{"class":240,"line":693},27,[238,695,696],{"class":252},"    height",[238,698,368],{"class":244},[238,700,701],{"class":252},"9",[238,703,402],{"class":374},[238,705,471],{"class":244},[238,707,709,712,714,717,719],{"class":240,"line":708},28,[238,710,711],{"class":252},"    border-radius",[238,713,368],{"class":244},[238,715,716],{"class":252},"10",[238,718,375],{"class":374},[238,720,471],{"class":244},[238,722,724,727,729,732,734,737,740,742,745,747,750],{"class":240,"line":723},29,[238,725,726],{"class":252},"    background",[238,728,368],{"class":244},[238,730,731],{"class":252},"linear-gradient",[238,733,504],{"class":244},[238,735,736],{"class":252},"135",[238,738,739],{"class":374},"deg",[238,741,386],{"class":244},[238,743,744],{"class":252},"#22d3ee",[238,746,386],{"class":244},[238,748,749],{"class":252},"#6366f1",[238,751,752],{"class":244},");\n",[238,754,756,759,761,763,765,768,770,773,776,778,780,782],{"class":240,"line":755},30,[238,757,758],{"class":252},"    clip-path",[238,760,368],{"class":244},[238,762,132],{"class":252},[238,764,504],{"class":244},[238,766,767],{"class":252},"18",[238,769,572],{"class":374},[238,771,772],{"class":374}," at",[238,774,775],{"class":252}," 50",[238,777,572],{"class":374},[238,779,775],{"class":252},[238,781,572],{"class":374},[238,783,752],{"class":244},[238,785,787,790,793,796,798,801],{"class":240,"line":786},31,[238,788,789],{"class":252},"    transition",[238,791,792],{"class":244},": clip-path ",[238,794,795],{"class":252},"0.45",[238,797,498],{"class":374},[238,799,800],{"class":252}," ease",[238,802,471],{"class":244},[238,804,806],{"class":240,"line":805},32,[238,807,535],{"class":244},[238,809,811,814,817],{"class":240,"line":810},33,[238,812,813],{"class":252},"  .card:hover",[238,815,816],{"class":252}," .card__img",[238,818,819],{"class":244},",\n",[238,821,823,826,828],{"class":240,"line":822},34,[238,824,825],{"class":252},"  .card:focus-visible",[238,827,816],{"class":252},[238,829,455],{"class":244},[238,831,833,835,837,839,841,844,846,848,850,852,854,856],{"class":240,"line":832},35,[238,834,758],{"class":252},[238,836,368],{"class":244},[238,838,132],{"class":252},[238,840,504],{"class":244},[238,842,843],{"class":252},"75",[238,845,572],{"class":374},[238,847,772],{"class":374},[238,849,775],{"class":252},[238,851,572],{"class":374},[238,853,775],{"class":252},[238,855,572],{"class":374},[238,857,752],{"class":244},[238,859,861],{"class":240,"line":860},36,[238,862,535],{"class":244},[238,864,866,868,870,873,875,877,879,882,885,887,890,892,894,896,898,901,903,906,908],{"class":240,"line":865},37,[238,867,825],{"class":252},[238,869,362],{"class":244},[238,871,872],{"class":252},"outline",[238,874,368],{"class":244},[238,876,466],{"class":252},[238,878,375],{"class":374},[238,880,881],{"class":252}," solid",[238,883,884],{"class":252}," #2563eb",[238,886,392],{"class":244},[238,888,889],{"class":252},"outline-offset",[238,891,368],{"class":244},[238,893,105],{"class":252},[238,895,375],{"class":374},[238,897,392],{"class":244},[238,899,900],{"class":252},"border-radius",[238,902,368],{"class":244},[238,904,905],{"class":252},"12",[238,907,375],{"class":374},[238,909,426],{"class":244},[238,911,913],{"class":240,"line":912},38,[238,914,433],{"emptyLinePlaceholder":432},[238,916,918],{"class":240,"line":917},39,[238,919,920],{"class":439},"  \u002F* 3. Diagonal: four points in both states, so it interpolates.\n",[238,922,924],{"class":240,"line":923},40,[238,925,926],{"class":439},"     The start state collapses the right edge into a sloped line. *\u002F\n",[238,928,930,933],{"class":240,"line":929},41,[238,931,932],{"class":252},"  .panel",[238,934,455],{"class":244},[238,936,938,941,943,945,947],{"class":240,"line":937},42,[238,939,940],{"class":252},"    padding",[238,942,368],{"class":244},[238,944,102],{"class":252},[238,946,402],{"class":374},[238,948,471],{"class":244},[238,950,952,954,956,959],{"class":240,"line":951},43,[238,953,726],{"class":252},[238,955,368],{"class":244},[238,957,958],{"class":252},"#0f172a",[238,960,471],{"class":244},[238,962,964,967,969,972],{"class":240,"line":963},44,[238,965,966],{"class":252},"    color",[238,968,368],{"class":244},[238,970,971],{"class":252},"#f8fafc",[238,973,471],{"class":244},[238,975,977,979,981,983,985,987,989,991,993,995,997,999,1001,1003,1005,1007,1009,1011],{"class":240,"line":976},45,[238,978,758],{"class":252},[238,980,368],{"class":244},[238,982,150],{"class":252},[238,984,504],{"class":244},[238,986,191],{"class":252},[238,988,575],{"class":252},[238,990,386],{"class":244},[238,992,191],{"class":252},[238,994,575],{"class":252},[238,996,386],{"class":244},[238,998,191],{"class":252},[238,1000,569],{"class":252},[238,1002,572],{"class":374},[238,1004,386],{"class":244},[238,1006,191],{"class":252},[238,1008,569],{"class":252},[238,1010,572],{"class":374},[238,1012,752],{"class":244},[238,1014,1016,1018,1021,1024,1026,1029,1032,1034,1037],{"class":240,"line":1015},46,[238,1017,489],{"class":252},[238,1019,1020],{"class":244},": diagonal-in ",[238,1022,1023],{"class":252},"0.8",[238,1025,498],{"class":374},[238,1027,1028],{"class":252}," ease-out",[238,1030,1031],{"class":252}," 0.3",[238,1033,498],{"class":374},[238,1035,1036],{"class":252}," both",[238,1038,471],{"class":244},[238,1040,1042],{"class":240,"line":1041},47,[238,1043,535],{"class":244},[238,1045,1047,1049,1052],{"class":240,"line":1046},48,[238,1048,541],{"class":374},[238,1050,1051],{"class":544}," diagonal-in",[238,1053,455],{"class":244},[238,1055,1057,1059,1061,1063,1065,1067,1069,1071,1073,1075,1078,1080,1082,1084,1086,1088,1090,1092,1094,1096,1098,1100],{"class":240,"line":1056},49,[238,1058,586],{"class":252},[238,1060,362],{"class":244},[238,1062,20],{"class":252},[238,1064,368],{"class":244},[238,1066,150],{"class":252},[238,1068,504],{"class":244},[238,1070,191],{"class":252},[238,1072,575],{"class":252},[238,1074,386],{"class":244},[238,1076,1077],{"class":252},"100",[238,1079,572],{"class":374},[238,1081,575],{"class":252},[238,1083,386],{"class":244},[238,1085,1077],{"class":252},[238,1087,572],{"class":374},[238,1089,569],{"class":252},[238,1091,572],{"class":374},[238,1093,386],{"class":244},[238,1095,191],{"class":252},[238,1097,569],{"class":252},[238,1099,572],{"class":374},[238,1101,580],{"class":244},[238,1103,1105],{"class":240,"line":1104},50,[238,1106,535],{"class":244},[238,1108,1110],{"class":240,"line":1109},51,[238,1111,433],{"emptyLinePlaceholder":432},[238,1113,1115],{"class":240,"line":1114},52,[238,1116,1117],{"class":439},"  \u002F* Reduced motion: no sweeping. Show the end state immediately. *\u002F\n",[238,1119,1121,1124],{"class":240,"line":1120},53,[238,1122,1123],{"class":374},"  @media",[238,1125,1126],{"class":244}," (prefers-reduced-motion: reduce) {\n",[238,1128,1130,1133,1135,1138,1140,1143,1145,1147,1149,1151,1153,1155],{"class":240,"line":1129},54,[238,1131,1132],{"class":252},"    .wipe",[238,1134,386],{"class":244},[238,1136,1137],{"class":252},".panel",[238,1139,362],{"class":244},[238,1141,1142],{"class":252},"animation",[238,1144,368],{"class":244},[238,1146,100],{"class":252},[238,1148,392],{"class":244},[238,1150,20],{"class":252},[238,1152,368],{"class":244},[238,1154,100],{"class":252},[238,1156,426],{"class":244},[238,1158,1160,1163,1165,1168,1170,1172],{"class":240,"line":1159},55,[238,1161,1162],{"class":252},"    .card__img",[238,1164,362],{"class":244},[238,1166,1167],{"class":252},"transition",[238,1169,368],{"class":244},[238,1171,100],{"class":252},[238,1173,426],{"class":244},[238,1175,1177],{"class":240,"line":1176},56,[238,1178,535],{"class":244},[238,1180,1182,1185,1187],{"class":240,"line":1181},57,[238,1183,1184],{"class":244},"\u003C\u002F",[238,1186,351],{"class":248},[238,1188,256],{"class":244},[238,1190,1192,1194,1196],{"class":240,"line":1191},58,[238,1193,1184],{"class":244},[238,1195,284],{"class":248},[238,1197,256],{"class":244},[238,1199,1201,1203,1206],{"class":240,"line":1200},59,[238,1202,262],{"class":244},[238,1204,1205],{"class":248},"body",[238,1207,256],{"class":244},[238,1209,1211,1214,1216,1219,1221,1224,1227,1229],{"class":240,"line":1210},60,[238,1212,1213],{"class":244},"  \u003C",[238,1215,10],{"class":248},[238,1217,1218],{"class":252}," class",[238,1220,270],{"class":244},[238,1222,1223],{"class":273},"\"wipe\"",[238,1225,1226],{"class":244},">Field notes\u003C\u002F",[238,1228,10],{"class":248},[238,1230,256],{"class":244},[238,1232,1234,1236,1238,1240,1242,1245,1248,1250,1253],{"class":240,"line":1233},61,[238,1235,1213],{"class":244},[238,1237,23],{"class":248},[238,1239,1218],{"class":252},[238,1241,270],{"class":244},[238,1243,1244],{"class":273},"\"card\"",[238,1246,1247],{"class":252}," href",[238,1249,270],{"class":244},[238,1251,1252],{"class":273},"\"\u002Ftrips\u002Fridge\u002F\"",[238,1254,256],{"class":244},[238,1256,1258,1261,1264,1266,1268,1271,1274,1276,1279,1282,1284,1287,1290,1292],{"class":240,"line":1257},62,[238,1259,1260],{"class":244},"    \u003C",[238,1262,1263],{"class":248},"div",[238,1265,1218],{"class":252},[238,1267,270],{"class":244},[238,1269,1270],{"class":273},"\"card__img\"",[238,1272,1273],{"class":252}," role",[238,1275,270],{"class":244},[238,1277,1278],{"class":273},"\"img\"",[238,1280,1281],{"class":252}," aria-label",[238,1283,270],{"class":244},[238,1285,1286],{"class":273},"\"Ridge at dawn\"",[238,1288,1289],{"class":244},">\u003C\u002F",[238,1291,1263],{"class":248},[238,1293,256],{"class":244},[238,1295,1297,1299,1301,1304,1306],{"class":240,"line":1296},63,[238,1298,1260],{"class":244},[238,1300,14],{"class":248},[238,1302,1303],{"class":244},">Ridge at dawn\u003C\u002F",[238,1305,14],{"class":248},[238,1307,256],{"class":244},[238,1309,1311,1314,1316],{"class":240,"line":1310},64,[238,1312,1313],{"class":244},"  \u003C\u002F",[238,1315,23],{"class":248},[238,1317,256],{"class":244},[238,1319,1321,1323,1326,1328,1330,1333,1336,1338,1341,1343,1345,1347],{"class":240,"line":1320},65,[238,1322,1213],{"class":244},[238,1324,1325],{"class":248},"section",[238,1327,1218],{"class":252},[238,1329,270],{"class":244},[238,1331,1332],{"class":273},"\"panel\"",[238,1334,1335],{"class":244},">\u003C",[238,1337,14],{"class":248},[238,1339,1340],{"class":244},">Panel content revealed on a diagonal.\u003C\u002F",[238,1342,14],{"class":248},[238,1344,1289],{"class":244},[238,1346,1325],{"class":248},[238,1348,256],{"class":244},[238,1350,1352,1354,1356],{"class":240,"line":1351},66,[238,1353,1184],{"class":244},[238,1355,1205],{"class":248},[238,1357,256],{"class":244},[238,1359,1361,1363,1365],{"class":240,"line":1360},67,[238,1362,1184],{"class":244},[238,1364,233],{"class":248},[238,1366,256],{"class":244},[14,1368,1369,1370,1372,1373,1376,1377,1380,1381,192],{},"The ",[18,1371,527],{}," fill mode on the load animations is essential. Without ",[18,1374,1375],{},"backwards"," fill, the element renders unclipped for the duration of the delay, then snaps to the clipped start state when the animation begins — a flash of the final content before it is hidden and revealed. ",[18,1378,1379],{},"animation-fill-mode: both"," applies the first keyframe during the delay and keeps the last one afterwards; the details are covered in ",[23,1382,1384],{"href":1383},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002F","Keyframe Animation Patterns",[34,1386,1388],{"id":1387},"the-key-technique-interpolating-point-by-point","The key technique: interpolating point by point",[14,1390,1391,1392,1396],{},"Polygon interpolation is literal: point one moves to point one, point two to point two. That makes the ",[1393,1394,1395],"em",{},"start"," polygon a design tool. The diagonal reveal starts with all four points on the left edge — a zero-width shape — and each point travels to its corner. Change which corner each point starts on and the reveal changes character without changing the end state.",[68,1398,75,1401,75,1404,75,1407,75,1410,75,1416,75,1420,75,1423,75,1426,75,1428,75,1431,75,1437,75,1440,75,1447,75,1451,75,1456,75,1459],{"viewBox":1399,"role":71,"ariaLabel":1400,"xmlns":73,"style":74},"0 0 720 280","Paths of four polygon points moving from the left edge to the four corners during a diagonal reveal",[77,1402,1403],{},"How four polygon points travel",[81,1405,1406],{},"Point one stays at the top-left, point two travels from the top-left to the top-right, point three travels from the bottom-left to the bottom-right, and point four stays at the bottom-left. The moving edge sweeps across the element.",[85,1408,1409],{"textAnchor":87,"x":88,"y":89,"style":90},"Each point moves to its matching point",[93,1411],{"x":1412,"y":1413,"width":1414,"height":97,"rx":105,"fill":100,"stroke":101,"strokeWidth":102,"strokeDashArray":1415,"opacity":106},"160","60","400",[104,105],[150,1417],{"points":1418,"fill":110,"opacity":1419},"160,60 400,60 320,240 160,240","0.28",[132,1421],{"cx":1412,"cy":1413,"r":1422,"fill":101},"7",[132,1424],{"cx":1412,"cy":1425,"r":1422,"fill":101},"240",[132,1427],{"cx":1414,"cy":1413,"r":1422,"fill":110},[132,1429],{"cx":1430,"cy":1425,"r":1422,"fill":110},"320",[240,1432],{"x1":1433,"y1":1413,"x2":1434,"y2":1413,"stroke":110,"strokeWidth":466,"strokeDashArray":1435},"170","550",[1436,104],"3",[240,1438],{"x1":1433,"y1":1425,"x2":1434,"y2":1425,"stroke":110,"strokeWidth":466,"strokeDashArray":1439},[1436,104],[85,1441,1446],{"textAnchor":1442,"x":1443,"y":1444,"style":1445},"end","140","64","text-anchor:end;fill:currentColor;font:12px ui-monospace,monospace","p1 fixed",[85,1448,1450],{"textAnchor":1442,"x":1443,"y":1449,"style":1445},"244","p4 fixed",[85,1452,1455],{"textAnchor":1395,"x":1453,"y":1444,"style":1454},"580","text-anchor:start;fill:currentColor;font:12px ui-monospace,monospace","p2 →",[85,1457,1458],{"textAnchor":1395,"x":1453,"y":1449,"style":1454},"p3 →",[85,1460,1461],{"textAnchor":87,"x":88,"y":129,"style":121},"p3 starts later than p2 via a staggered keyframe, tilting the leading edge",[14,1463,1464,1465,1468],{},"To tilt the leading edge, give the two moving points different progress at an intermediate keyframe — for example ",[18,1466,1467],{},"50% { clip-path: polygon(0 0, 70% 0, 40% 100%, 0 100%); }",". The top point leads and the bottom point follows, producing a diagonal sweep. Every keyframe must still list four points.",[14,1470,1471,1472,192],{},"When a design calls for a transition between visibly different shapes — a triangle becoming a hexagon — pad the simpler shape with duplicate points so both have the same count. That technique is developed in ",[23,1473,1475],{"href":1474},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmorphing-shapes-with-clip-path-polygon\u002F","Morphing Shapes With clip-path polygon()",[34,1477,1479],{"id":1478},"timing-a-reveal-so-it-reads-well","Timing a reveal so it reads well",[14,1481,1482],{},"A reveal is only as good as its timing, and clip-based reveals have characteristic timing needs that differ from fades.",[14,1484,1485,1488,1489,192],{},[175,1486,1487],{},"Duration scales with the area uncovered."," A wipe across a short heading reads well at 400 to 600 milliseconds; the same duration on a full-width hero image feels rushed because the eye has to track a much longer edge. Allow roughly 700 to 900 milliseconds for large surfaces and keep small reveals, such as an icon or badge, under 300. The broader reasoning is in ",[23,1490,1492],{"href":1491},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations\u002F","Choosing Animation Durations",[14,1494,1495,1498,1499,1502],{},[175,1496,1497],{},"Ease out, not in."," A reveal should move fastest at the start, when there is nothing to read yet, and slow down as the last content is uncovered so the reader's eye catches up. A strong ease-out such as ",[18,1500,1501],{},"cubic-bezier(0.22, 1, 0.36, 1)"," does that. Ease-in reveals feel sluggish at first and then slam shut at the end, exactly when the eye wants to settle.",[14,1504,1505,1508,1509,1512,1513,1516,1517,1520],{},[175,1506,1507],{},"Hover reveals should reverse faster than they open."," When the pointer leaves, the content is no longer the focus of attention, so a slow closing iris feels laggy. A transition can have different timings in each direction by setting a shorter ",[18,1510,1511],{},"transition-duration"," on the base state and a longer one on the ",[18,1514,1515],{},":hover"," state: the declaration on the state being ",[1393,1518,1519],{},"entered"," governs the transition.",[14,1522,1523,1526,1527,1530,1531,192],{},[175,1524,1525],{},"Stagger reveals rather than stacking them."," Several elements revealing simultaneously compete for attention. Offset each with a small ",[18,1528,1529],{},"animation-delay"," — 60 to 100 milliseconds per item — so the eye moves through them in order. Custom properties make this systematic, as shown in ",[23,1532,1534],{"href":1533},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties\u002F","Staggered List Animations With Custom Properties",[34,1536,1538],{"id":1537},"variation-scroll-triggered-reveals","Variation: scroll-triggered reveals",[14,1540,1541,1542,1546],{},"Reveals are most often wanted as content scrolls into view. With ",[23,1543,1545],{"href":1544},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations\u002F","scroll-driven animations",", the same keyframes can be bound to the element's own passage through the viewport, with no observer script.",[229,1548,1552],{"className":1549,"code":1550,"language":1551,"meta":234,"style":234},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast","@supports (animation-timeline: view()) {\n  @media (prefers-reduced-motion: no-preference) {\n    .reveal-on-scroll {\n      animation: wipe-in linear both;\n      animation-timeline: view();\n      \u002F* Start as the element enters; finish when 40% of its travel is done. *\u002F\n      animation-range: entry 0% cover 40%;\n    }\n  }\n}\n","css",[18,1553,1554,1568,1575,1582,1596,1604,1609,1631,1636,1640],{"__ignoreMap":234},[238,1555,1556,1559,1562,1565],{"class":240,"line":241},[238,1557,1558],{"class":374},"@supports",[238,1560,1561],{"class":244}," (",[238,1563,1564],{"class":252},"animation-timeline",[238,1566,1567],{"class":244},": view()) {\n",[238,1569,1570,1572],{"class":240,"line":259},[238,1571,1123],{"class":374},[238,1573,1574],{"class":244}," (prefers-reduced-motion: no-preference) {\n",[238,1576,1577,1580],{"class":240,"line":279},[238,1578,1579],{"class":252},"    .reveal-on-scroll",[238,1581,455],{"class":244},[238,1583,1584,1587,1589,1592,1594],{"class":240,"line":289},[238,1585,1586],{"class":252},"      animation",[238,1588,492],{"class":244},[238,1590,1591],{"class":252},"linear",[238,1593,1036],{"class":252},[238,1595,471],{"class":244},[238,1597,1598,1601],{"class":240,"line":307},[238,1599,1600],{"class":252},"      animation-timeline",[238,1602,1603],{"class":244},": view();\n",[238,1605,1606],{"class":240,"line":332},[238,1607,1608],{"class":439},"      \u002F* Start as the element enters; finish when 40% of its travel is done. *\u002F\n",[238,1610,1611,1614,1617,1619,1621,1624,1627,1629],{"class":240,"line":346},[238,1612,1613],{"class":252},"      animation-range",[238,1615,1616],{"class":244},": entry ",[238,1618,191],{"class":252},[238,1620,572],{"class":374},[238,1622,1623],{"class":252}," cover",[238,1625,1626],{"class":252}," 40",[238,1628,572],{"class":374},[238,1630,471],{"class":244},[238,1632,1633],{"class":240,"line":356},[238,1634,1635],{"class":244},"    }\n",[238,1637,1638],{"class":240,"line":429},[238,1639,535],{"class":244},[238,1641,1642],{"class":240,"line":436},[238,1643,1644],{"class":244},"}\n",[14,1646,1647,1648,1650,1651,1653],{},"Because progress now comes from scroll position, the timing function should be ",[18,1649,1591],{}," — easing would distort the mapping between scroll distance and reveal. Wrapping the rule in ",[18,1652,1558],{}," and the motion query means browsers without scroll timelines, and users who prefer less motion, see the content unclipped.",[34,1655,1657],{"id":1656},"browser-support","Browser support",[14,1659,1660,1661,1663,1664,386,1666,386,1668,200,1670,1672,1673,1675,1676,1679],{},"Animating ",[18,1662,20],{}," basic shapes — ",[18,1665,179],{},[18,1667,199],{},[18,1669,203],{},[18,1671,215],{}," — is supported in current versions of Chrome, Edge, Firefox and Safari. Scroll-driven animations are supported in Chrome and Edge 115+ and Safari 26+, and remain unshipped in Firefox, where the ",[18,1674,1558],{}," guard leaves the content visible. ",[18,1677,1678],{},"prefers-reduced-motion"," is supported in Chrome 74+, Edge 79+, Firefox 63+ and Safari 10.1+.",[34,1681,1683],{"id":1682},"faq","FAQ",[14,1685,1686,1692,1693,188,1695,386,1697,188,1699,386,1701,188,1703,1705,1706,188,1708,1710],{},[175,1687,1688,1689,1691],{},"Which ",[18,1690,20],{}," shapes can be animated?","\nTwo shapes of the same type interpolate: ",[18,1694,179],{},[18,1696,179],{},[18,1698,199],{},[18,1700,199],{},[18,1702,203],{},[18,1704,203],{},", and ",[18,1707,215],{},[18,1709,215],{}," with the same number of points. Animating between different shape functions, or polygons with different point counts, jumps instead of interpolating.",[14,1712,1713,1719,1720,1722,1723,1726,1727,1729],{},[175,1714,1715,1716,1718],{},"Is animating ",[18,1717,20],{}," fast?","\nIt is cheaper than animating layout properties because the element's size and position never change, but in most engines ",[18,1721,20],{}," animation still repaints on the main thread. Keep reveal animations short and on modest elements, and prefer ",[18,1724,1725],{},"transform"," or ",[18,1728,43],{}," for anything that loops.",[14,1731,1732,1735,1736,1738],{},[175,1733,1734],{},"Does a clipped element still receive clicks outside the visible shape?","\nNo. Hit testing respects ",[18,1737,20],{},", so pointer events only reach the visible region. That is usually desirable for reveals, but it means a partly revealed button can be hard to click until the animation finishes.",[14,1740,1741,1747,1749,1750,1753],{},[175,1742,1743,1744,1746],{},"Why does my ",[18,1745,179],{}," reveal look different in right-to-left layouts?",[18,1748,179],{}," takes physical edges: top, right, bottom and left. A wipe written from left to right continues to run left to right in RTL text. Swap the values under ",[18,1751,1752],{},":dir(rtl)"," if the reveal should follow the reading direction.",[34,1755,1757],{"id":1756},"related","Related",[169,1759,1760,1765,1772,1777],{},[172,1761,1762,1764],{},[23,1763,26],{"href":25}," — the parent guide.",[172,1766,1767,1771],{},[23,1768,1770],{"href":1769},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fmask-image-fade-edges\u002F","Fade Edges With mask-image"," — soft-edged reveals instead of hard ones.",[172,1773,1774,1776],{},[23,1775,1475],{"href":1474}," — shape-to-shape transitions.",[172,1778,1779,1783],{},[23,1780,1782],{"href":1781},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media\u002F","Aspect Ratio for Responsive Media"," — reserving the box a reveal plays inside.",[351,1785,1786],{},"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 .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 pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}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":234,"searchDepth":259,"depth":259,"links":1788},[1789,1790,1791,1792,1793,1794,1795,1796,1797],{"id":36,"depth":259,"text":37},{"id":60,"depth":259,"text":61},{"id":219,"depth":259,"text":220},{"id":1387,"depth":259,"text":1388},{"id":1478,"depth":259,"text":1479},{"id":1537,"depth":259,"text":1538},{"id":1656,"depth":259,"text":1657},{"id":1682,"depth":259,"text":1683},{"id":1756,"depth":259,"text":1757},"Wipe, iris and corner reveals with clip-path inset(), circle() and polygon(): matching point counts, hover and focus triggers, and reduced-motion fallbacks.","md",{"pageTitle":1801,"datePublished":1802,"dateModified":1802,"faq":1803},"Clip-Path Reveal Animations in CSS","2026-09-18",[1804,1807,1810,1812],{"q":1805,"a":1806},"Which clip-path shapes can be animated?","Two shapes of the same type interpolate: inset() to inset(), circle() to circle(), ellipse() to ellipse(), and polygon() to polygon() with the same number of points. Animating between different shape functions, or polygons with different point counts, jumps instead of interpolating.",{"q":1808,"a":1809},"Is animating clip-path fast?","It is cheaper than animating layout properties because the element's size and position never change, but in most engines clip-path animation still repaints on the main thread. Keep reveal animations short and on modest elements, and prefer transform or opacity for anything that loops.",{"q":1734,"a":1811},"No. Hit testing respects clip-path, so pointer events only reach the visible region. That is usually desirable for reveals, but it means a partly revealed button can be hard to click until the animation finishes.",{"q":1813,"a":1814},"Why does my inset() reveal look different in right-to-left layouts?","inset() takes physical edges: top, right, bottom and left. A wipe written from left to right continues to run left to right in RTL text. Swap the values under :dir(rtl) if the reveal should follow the reading direction.","\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations",{"title":5,"description":1798},"css-only-micro-interactions-animations\u002Fclip-path-and-mask-animations\u002Fclip-path-reveal-animations\u002Findex","ljqKIMSHJ1k6tv6AX42hV6QMWwrPPLHGMYfM39qy4Mk",[1820,1823,1826,1829,1832,1835,1838,1841,1844,1847,1850,1853,1854,1857,1860,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,1995,1998,2001,2004,2007,2010,2013,2016,2019,2022,2025,2028,2031,2034,2037,2040,2043,2046,2049,2052,2055,2058,2061,2064,2067,2070,2073,2076,2079,2082,2085,2088,2091,2094,2097,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,2273,2276,2279,2282,2285,2288,2291,2294,2297,2300,2303,2306,2309,2312,2315,2318,2321,2324,2327,2330,2333,2336,2339,2342,2345,2348,2351,2354,2357,2360,2363,2366,2369,2372,2375],{"path":1821,"title":1822},"\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":1824,"title":1825},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fflashing-content-and-seizure-thresholds","Flashing Content and Seizure Thresholds",{"path":1827,"title":1828},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fforced-colors-mode-and-animations","Forced Colors Mode and Animations",{"path":1830,"title":1831},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations","Accessibility in CSS Animations: Patterns, Specs & Best Practices",{"path":1833,"title":1834},"\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":1836,"title":1837},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fprefers-reduced-motion-recipes","prefers-reduced-motion Recipes: A Reduction for Every Common Effect",{"path":1839,"title":1840},"\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":1842,"title":1843},"\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":1845,"title":1846},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fvestibular-safe-animation-patterns","Vestibular-Safe Animation Patterns: Why Some Motion Makes People Sick",{"path":1848,"title":1849},"\u002Fcss-only-micro-interactions-animations\u002Faccessibility-in-css-animations\u002Fwcag-motion-success-criteria","WCAG Motion Success Criteria: What Each One Actually Requires",{"path":1851,"title":1852},"\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":1815,"title":5},{"path":1855,"title":1856},"\u002Fcss-only-micro-interactions-animations\u002Fclip-path-and-mask-animations","Clip-Path & Mask Animations: Animating Visibility Instead of Position",{"path":1858,"title":1859},"\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":1861,"title":1862},"\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":1864,"title":1865},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fanimating-gradients","Animating CSS Gradients: Smooth Colour Motion Without Jumps",{"path":1867,"title":1868},"\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":1870,"title":1871},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions","Color & Theme Transitions: Colour as Part of the Motion System",{"path":1873,"title":1874},"\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":1876,"title":1877},"\u002Fcss-only-micro-interactions-animations\u002Fcolor-and-theme-transitions\u002Fsmooth-theme-switching-transitions","Smooth Theme Switching: Crossfades, Circular Reveals and No Flash",{"path":1879,"title":1880},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fcontainer-query-hover-affordances","Container Query Hover Affordances: When Narrow Means Persistent, Not Hidden",{"path":1882,"title":1883},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion","Container-Aware Motion: Animation Sized by the Space a Component Actually Has",{"path":1885,"title":1886},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Flayout-change-animations-at-container-breakpoints","Animating Changes at Container Breakpoints",{"path":1888,"title":1889},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fmotion-driven-by-container-style-queries","Motion Driven by Container Style Queries",{"path":1891,"title":1892},"\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":1894,"title":1895},"\u002Fcss-only-micro-interactions-animations\u002Fcontainer-aware-motion\u002Fsuppressing-motion-in-small-containers","Suppressing Motion in Small Containers: Deliberately Animating Nothing",{"path":1897,"title":1898},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fcontrolling-css-animations-from-javascript","Controlling CSS Animations From JavaScript",{"path":1900,"title":1901},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api","CSS Animation vs the Web Animations API: A Decision Guide",{"path":1903,"title":1904},"\u002Fcss-only-micro-interactions-animations\u002Fcss-animation-vs-web-animations-api\u002Fwaapi-vs-css-for-interruptible-ui","Interruptible UI: CSS Transitions vs WAAPI",{"path":1906,"title":1907},"\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":1909,"title":1910},"\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":1912,"title":1913},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fcustom-property-fallbacks-and-invalid-values","Custom Property Fallbacks and Invalid Values",{"path":1915,"title":1916},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Ffluid-spacing-tokens-driving-transition-durations","Fluid Spacing Tokens That Drive Transition Durations",{"path":1918,"title":1919},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture","CSS Custom Properties Architecture: Scalable Design Systems & Dynamic UI",{"path":1921,"title":1922},"\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":1924,"title":1925},"\u002Fcss-only-micro-interactions-animations\u002Fcss-custom-properties-architecture\u002Fscoping-custom-properties-to-components","Scoping Custom Properties to Components",{"path":1927,"title":1928},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fcss-transition-timing-functions","CSS Transition Timing Functions: ease, cubic-bezier(), steps() and linear()",{"path":1930,"title":1931},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals","CSS Transition Fundamentals: Architecture, Performance & Patterns",{"path":1933,"title":1934},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Finterrupted-and-reversing-transitions","Interrupted and Reversing Transitions: What Happens Mid-Flight",{"path":1936,"title":1937},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Fstarting-style-entry-animations","@starting-style: Animating an Element's Very First Style Change",{"path":1939,"title":1940},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-delay-choreography","Choreographing Motion With transition-delay",{"path":1942,"title":1943},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransition-shorthand-and-multiple-properties","The transition Shorthand and Multiple Properties",{"path":1945,"title":1946},"\u002Fcss-only-micro-interactions-animations\u002Fcss-transition-fundamentals\u002Ftransitioning-display-with-allow-discrete","Transitioning display with transition-behavior: allow-discrete and @starting-style",{"path":1948,"title":1949},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fanimating-dialog-open-and-close","Animating \u003Cdialog> Open and Close: Both Directions, No Library",{"path":1951,"title":1952},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fbackdrop-animations","Animating ::backdrop: Fades and Blurs Behind Dialogs and Popovers",{"path":1954,"title":1955},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations","Dialog & Popover Animations: Motion for the Top Layer",{"path":1957,"title":1958},"\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":1960,"title":1961},"\u002Fcss-only-micro-interactions-animations\u002Fdialog-and-popover-animations\u002Fpopover-entry-and-exit-transitions","Popover Menus That Animate From Their Anchor",{"path":1963,"title":1964},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fchoosing-animation-durations","Choosing Animation Durations: How Long Motion Should Last",{"path":1966,"title":1967},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fcubic-bezier-overshoot-and-anticipation","Overshoot and Anticipation With cubic-bezier(): Motion With Character",{"path":1969,"title":1970},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design\u002Fentry-vs-exit-easing","Entry vs Exit Easing: Different Curves for Arriving and Leaving",{"path":1972,"title":1973},"\u002Fcss-only-micro-interactions-animations\u002Feasing-and-motion-design","Easing & Motion Design: Making CSS Motion Feel Intentional",{"path":1975,"title":1976},"\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":1978,"title":1979},"\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":1981,"title":1982},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Faccessible-css-only-tooltips","Accessible CSS-Only Tooltips and Hover Cards With  and ",{"path":1984,"title":1985},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Fbutton-press-and-active-states","Button Press and  States",{"path":1987,"title":1988},"\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":1990,"title":1991},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design\u002Ffocus-within-form-patterns"," Form Patterns: Styling a Group From the Field Inside It",{"path":1993,"title":1994},"\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":1996,"title":1997},"\u002Fcss-only-micro-interactions-animations\u002Fhover-focus-state-design","Hover & Focus State Design: Spec-Compliant Patterns for Modern UIs",{"path":1999,"title":2000},"\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":2002,"title":2003},"\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":2005,"title":2006},"\u002Fcss-only-micro-interactions-animations","CSS-Only Micro-Interactions & Animations: Architecture, Performance & Implementation",{"path":2008,"title":2009},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fanimation-composition-and-stacking","Stacking Animations With animation-composition",{"path":2011,"title":2012},"\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":2014,"title":2015},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcontainer-query-triggered-keyframe-animations","Container-Query-Triggered Keyframe Animations: Animate Differently per Available Space",{"path":2017,"title":2018},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fcss-only-accordions-and-disclosure","CSS-Only Accordions and Disclosure Widgets with details and summary",{"path":2020,"title":2021},"\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":2023,"title":2024},"\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":2026,"title":2027},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns","Keyframe Animation Patterns: Spec-Compliant Architectures for Modern UIs",{"path":2029,"title":2030},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fmulti-step-keyframes-and-per-keyframe-easing","Multi-Step Keyframes and Per-Keyframe Easing",{"path":2032,"title":2033},"\u002Fcss-only-micro-interactions-animations\u002Fkeyframe-animation-patterns\u002Fstaggered-list-animations-with-custom-properties","Staggered List Animations Using --i Index Custom Properties",{"path":2035,"title":2036},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fanimating-box-shadow-and-filters-cheaply","Animating box-shadow and Filters Cheaply",{"path":2038,"title":2039},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcontain-property-for-animation-performance","The contain Property for Animation Performance",{"path":2041,"title":2042},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Fcss-triggers-layout-paint-composite","Layout, Paint and Composite: What Triggers What",{"path":2044,"title":2045},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration","Performance & GPU Acceleration in CSS: A Developer’s Blueprint",{"path":2047,"title":2048},"\u002Fcss-only-micro-interactions-animations\u002Fperformance-gpu-acceleration\u002Foptimizing-css-animations-for-60fps","Optimizing CSS Animations for 60fps: Budgeting the Frame",{"path":2050,"title":2051},"\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":2053,"title":2054},"\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":2056,"title":2057},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations","Scroll-Driven Animations: Binding Motion to Scroll Position in Pure CSS",{"path":2059,"title":2060},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-animation-fallbacks","Shipping Scroll-Driven Animations Without Breaking Anything",{"path":2062,"title":2063},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-driven-parallax-effects","Scroll-Driven Parallax Effects in CSS",{"path":2065,"title":2066},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-progress-bar-without-javascript","A Reading Progress Bar Driven by scroll(root)",{"path":2068,"title":2069},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fscroll-triggered-reveal-animations","Reveal-on-Scroll with view() and animation-range",{"path":2071,"title":2072},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Ftimeline-scope-for-cross-element-animations","timeline-scope for Cross-Element Animations",{"path":2074,"title":2075},"\u002Fcss-only-micro-interactions-animations\u002Fscroll-driven-animations\u002Fview-timeline-and-animation-range","View Timelines and animation-range",{"path":2077,"title":2078},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fcross-document-view-transitions","Cross-Document View Transitions",{"path":2080,"title":2081},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers","View Transitions for CSS Developers: the Pseudo-Element Tree, Snapshots, and Named Elements",{"path":2083,"title":2084},"\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":2086,"title":2087},"\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":2089,"title":2090},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transition-types-and-classes","View Transition Types and Classes",{"path":2092,"title":2093},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-for-list-reordering","View Transitions for List Reordering",{"path":2095,"title":2096},"\u002Fcss-only-micro-interactions-animations\u002Fview-transitions-for-css-developers\u002Fview-transitions-with-reduced-motion","Honouring prefers-reduced-motion in View Transitions",{"path":378,"title":2098},"Modern CSS Layouts & Micro-Interactions",{"path":2100,"title":2101},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioned-tooltips","Anchor-Positioned Tooltips: Tethering, Flipping, and Getting the Semantics Right",{"path":2103,"title":2104},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-positioning-fallbacks","Anchor Positioning Fallbacks: A Graceful Floor for Older Browser Versions",{"path":2106,"title":2107},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fanchor-size-for-matching-widths","anchor-size(): Overlays That Match Their Trigger's Size",{"path":2109,"title":2110},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays","CSS Anchor Positioning and Overlays: Tethering Elements Without JavaScript",{"path":2112,"title":2113},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-attribute-and-css-styling","The popover Attribute: Top-Layer Overlays With No JavaScript",{"path":2115,"title":2116},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fpopover-light-dismiss-and-stacking","Popover Light Dismiss, Nesting and Stacking",{"path":2118,"title":2119},"\u002Fmastering-container-queries-responsive-layouts\u002Fanchor-positioning-and-overlays\u002Fposition-area-grid-explained","position-area: The Anchor Placement Grid",{"path":2121,"title":2122},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fcontainer-query-polyfill-tradeoffs","Container Query Polyfills: What They Cost and When to Skip Them",{"path":2124,"title":2125},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ffeature-detection-with-supports","Feature Detection with @supports: Syntax, Semantics, and the Traps",{"path":2127,"title":2128},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fhandling-container-query-fallbacks-for-older-browsers","Handling Container Query Fallbacks for Older Browsers",{"path":2130,"title":2131},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks","Container Query Fallbacks: Spec-Compliant CSS Strategies for Legacy Browsers",{"path":2133,"title":2134},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Fintrinsic-layout-fallbacks-without-queries","Intrinsic Layout Fallbacks: Baselines That Adapt Without Any Query",{"path":2136,"title":2137},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-fallbacks\u002Ftesting-fallbacks-without-old-browsers","Testing CSS Fallbacks Without an Old Browser",{"path":2139,"title":2140},"\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":2142,"title":2143},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-query-range-and-logic-operators","Container Query Range Syntax and Logic Operators",{"path":2145,"title":2146},"\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":2148,"title":2149},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-type-size-vs-inline-size","Choosing container-type: inline-size, size, or normal",{"path":2151,"title":2152},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fcontainer-vs-media-queries-comparison","Container vs Media Queries: Choosing the Right Reference Box",{"path":2154,"title":2155},"\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":2157,"title":2158},"\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":2160,"title":2161},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics","Container Query Syntax Basics",{"path":2163,"title":2164},"\u002Fmastering-container-queries-responsive-layouts\u002Fcontainer-query-syntax-basics\u002Fnesting-and-naming-container-queries","Nesting and Naming Container Queries: Targeting the Right Ancestor",{"path":2166,"title":2167},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fauto-fit-minmax-responsive-grids","Responsive Grids with repeat(auto-fit, minmax())",{"path":2169,"title":2170},"\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":2172,"title":2173},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fgrid-auto-flow-dense-packing","grid-auto-flow: dense for Packed Layouts",{"path":2175,"title":2176},"\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":2178,"title":2179},"\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":2181,"title":2182},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts","CSS Grid and Subgrid Layouts for Responsive Interfaces",{"path":2184,"title":2185},"\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":2187,"title":2188},"\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":2190,"title":2191},"\u002Fmastering-container-queries-responsive-layouts\u002Fcss-grid-and-subgrid-layouts\u002Fsubgrid-vs-nested-grid","Subgrid vs an Independently Nested Grid",{"path":2193,"title":2194},"\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":2196,"title":2197},"\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":2199,"title":2200},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-grow-and-flex-shrink-explained","flex-grow and flex-shrink Explained",{"path":2202,"title":2203},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflex-wrap-intrinsic-responsive-rows","Breakpoint-Free Responsive Rows With flex-wrap and flex-basis",{"path":2205,"title":2206},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns\u002Fflexbox-gap-and-spacing","Flexbox gap vs Margins: Spacing Items Without Edge Hacks",{"path":2208,"title":2209},"\u002Fmastering-container-queries-responsive-layouts\u002Fflexbox-layout-patterns","Flexbox Layout Patterns: One-Dimensional Layout for Real Components",{"path":2211,"title":2212},"\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":2214,"title":2215},"\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":2217,"title":2218},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Fdebugging-clamp-values","Debugging clamp(): Values That Are Ignored, Stuck or Never Fluid",{"path":2220,"title":2221},"\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":2223,"title":2224},"\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":2226,"title":2227},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-type-accessibility-and-zoom","Fluid Type, Accessibility and Zoom: The vw-Only Trap",{"path":2229,"title":2230},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp\u002Ffluid-typography-without-javascript","Fluid Typography Without JavaScript: A Precision CSS Reference",{"path":2232,"title":2233},"\u002Fmastering-container-queries-responsive-layouts\u002Ffluid-typography-with-clamp","Fluid Typography with clamp(): A Practical Guide for Modern CSS",{"path":2235,"title":2236},"\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":2238,"title":2239},"\u002Fmastering-container-queries-responsive-layouts","Mastering Container Queries & Responsive Layouts",{"path":2241,"title":2242},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Faspect-ratio-for-responsive-media","Using aspect-ratio for Responsive Media and Preventing Layout Shift",{"path":2244,"title":2245},"\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":2247,"title":2248},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques","Intrinsic Sizing Techniques: Modern CSS Layouts for Responsive UI",{"path":2250,"title":2251},"\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":2253,"title":2254},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fmin-max-fit-content-explained","min-content, max-content, and fit-content() Explained",{"path":2256,"title":2257},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fobject-fit-and-object-position","object-fit and object-position: Images That Fit Any Box",{"path":2259,"title":2260},"\u002Fmastering-container-queries-responsive-layouts\u002Fintrinsic-sizing-techniques\u002Fpreventing-flex-and-grid-overflow","The min-width: auto Trap in Flex and Grid Layouts",{"path":2262,"title":2263},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-for-reset-and-tokens","Cascade Layers for Reset and Design Tokens",{"path":2265,"title":2266},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcascade-layers-vs-specificity-hacks","Cascade Layers vs Specificity Hacks: Ordering Instead of Escalating",{"path":2268,"title":2269},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fcss-scope-for-component-styles","@scope for Component Styles: Short Selectors That Cannot Leak",{"path":2271,"title":2272},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies","Modern CSS Reset Strategies: A Spec-Compliant Foundation",{"path":2274,"title":2275},"\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":2277,"title":2278},"\u002Fmastering-container-queries-responsive-layouts\u002Fmodern-css-reset-strategies\u002Fwriting-a-minimal-modern-reset","Writing a Minimal Modern CSS Reset: Every Line Justified",{"path":2280,"title":2281},"\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":2283,"title":2284},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has\u002Fempty-and-loading-states-with-has","Empty and Loading States With ()",{"path":2286,"title":2287},"\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":2289,"title":2290},"\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":2292,"title":2293},"\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":2295,"title":2296},"\u002Fmastering-container-queries-responsive-layouts\u002Fparent-aware-layouts-with-has","Parent-Aware Layouts With :has(): Letting Containers React to Their Contents",{"path":2298,"title":2299},"\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":2301,"title":2302},"\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":2304,"title":2305},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-data-tables","Container Query Data Tables: Reflowing Tables to Cards",{"path":2307,"title":2308},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fcontainer-query-sidebar-layouts","Container Query Sidebar Layouts That Travel Between Contexts",{"path":2310,"title":2311},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns","Responsive Component Patterns: Architecture & Implementation",{"path":2313,"title":2314},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-forms-with-container-queries","Responsive Forms with Container Queries: Reflow Without Losing the Wiring",{"path":2316,"title":2317},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-hero-sections-with-container-queries","Responsive Hero Sections With Container Queries",{"path":2319,"title":2320},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-navigation-without-media-queries","Responsive Navigation Without Media Queries Using Container Queries",{"path":2322,"title":2323},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Fresponsive-pricing-tables","Responsive Pricing Tables: Aligned Features, a Clear Recommendation, Any Width",{"path":2325,"title":2326},"\u002Fmastering-container-queries-responsive-layouts\u002Fresponsive-component-patterns\u002Ftabs-that-become-accordions","Tabs That Become an Accordion: One Component, Two Layouts",{"path":2328,"title":2329},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts\u002Fcss-only-carousel-with-scroll-snap","A CSS-Only Carousel With Scroll Snap",{"path":2331,"title":2332},"\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":2334,"title":2335},"\u002Fmastering-container-queries-responsive-layouts\u002Fscroll-snap-and-overflow-layouts","Scroll Snap & Overflow Layouts: Designing Components That Scroll on Purpose",{"path":2337,"title":2338},"\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":2340,"title":2341},"\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":2343,"title":2344},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fcombining-size-and-style-queries","Combining Size and Style Container Queries",{"path":2346,"title":2347},"\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":2349,"title":2350},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state","Style Queries and Container State: Token-Driven Component Variants",{"path":2352,"title":2353},"\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":2355,"title":2356},"\u002Fmastering-container-queries-responsive-layouts\u002Fstyle-queries-and-container-state\u002Fstyle-query-component-variants","Component Variants With Style Queries: One Token, Many Looks",{"path":2358,"title":2359},"\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":2361,"title":2362},"\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":2364,"title":2365},"\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":2367,"title":2368},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout","Viewport Units & Mobile Layout: Designing for the Screen You Actually Get",{"path":2370,"title":2371},"\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":2373,"title":2374},"\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":2376,"title":2377},"\u002Fmastering-container-queries-responsive-layouts\u002Fviewport-units-and-mobile-layout\u002Fvirtual-keyboard-and-interactive-widget","Layouts That Survive the Virtual Keyboard",{"title":2379,"caption":2380,"height":2381,"html":2382,"css":2383},"Wipe, iris and diagonal reveals with clip-path","The heading wipes in and the panel sweeps in on load; hover or Tab to the card to open its image like an iris.",420,"\n\u003Ch1 class=\"wipe\">Field notes\u003C\u002Fh1>\n\u003Ca class=\"card\" href=\"#\">\n  \u003Cdiv class=\"card__img\" role=\"img\" aria-label=\"Ridge at dawn\">\u003C\u002Fdiv>\n  \u003Cp>Ridge at dawn\u003C\u002Fp>\n\u003C\u002Fa>\n\u003Csection class=\"panel\">\u003Cp>Panel content revealed on a diagonal.\u003C\u002Fp>\u003C\u002Fsection>","\nbody { display: grid; gap: 1.25rem; place-items: start; }\n.wipe { font-size: 2rem; margin: 0; animation: wipe-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes wipe-in {\n  from { clip-path: inset(0 100% 0 0); }\n  to { clip-path: inset(0 0 0 0); }\n}\n.card { display: block; width: 16rem; color: inherit; text-decoration: none; }\n.card p { margin: 0.4rem 0 0; }\n.card__img {\n  height: 8rem;\n  border-radius: 10px;\n  background: linear-gradient(135deg, #22d3ee, #6366f1);\n  clip-path: circle(18% at 50% 50%);\n  transition: clip-path 0.45s ease;\n}\n.card:hover .card__img, .card:focus-visible .card__img { clip-path: circle(75% at 50% 50%); }\n.card:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: 4px; border-radius: 12px; }\n.panel {\n  padding: 1rem 1.5rem;\n  background: #0f172a;\n  color: #f8fafc;\n  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);\n  animation: diagonal-in 0.8s ease-out 0.3s both;\n}\n.panel p { margin: 0; }\n@keyframes diagonal-in { to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }\n@media (prefers-reduced-motion: reduce) {\n  .wipe, .panel { animation: none; clip-path: none; }\n  .card__img { transition: none; }\n}",1789717747069]