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