[{"data":1,"prerenderedAt":203},["ShallowReactive",2],{"cache-\u002Fcache\u002Fanimating-height-auto":3},{"id":4,"title":5,"added":6,"body":7,"category":191,"cover":191,"coverSmall":191,"description":192,"expires":191,"extension":193,"external_url":191,"hash":194,"language":48,"meta":195,"navigation":138,"path":196,"pinned":138,"related":191,"seo":197,"series":191,"slug":198,"status":199,"stem":200,"subcategory":191,"tags":201,"updated":191,"version":191,"__hash__":202},"cache\u002Fcache\u002F2025\u002F03\u002Fanimating-height-auto.md","Animating Height Auto","2024-12-08",{"type":8,"value":9,"toc":186},"minimark",[10,15,36,40,43,81,84,170,174,182],[11,12,14],"h2",{"id":13},"what-this-is","What This Is?",[16,17,18,19,23,24,28,29],"p",{},"There's new ",[20,21,22],"strong",{},"experimental"," browser support for animating height via keywords like ",[25,26,27],"code",{},"height: auto;",". ",[30,31,35],"a",{"href":32,"rel":33},"https:\u002F\u002Fdrafts.csswg.org\u002Fcss-values-5\u002F#valdef-interpolate-size-allow-keywords",[34],"nofollow","Here's the W3C Working Draft",[11,37,39],{"id":38},"how-this-works","How this works",[16,41,42],{},"First we need to opt in:",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-css shiki shiki-themes github-light github-dark","html {\n    interpolate-size: allow-keywords;\n}\n","css","",[25,51,52,65,75],{"__ignoreMap":49},[53,54,57,61],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"s9eBZ","html",[53,62,64],{"class":63},"sVt8B"," {\n",[53,66,68,72],{"class":55,"line":67},2,[53,69,71],{"class":70},"sj4cs","    interpolate-size",[53,73,74],{"class":63},": allow-keywords;\n",[53,76,78],{"class":55,"line":77},3,[53,79,80],{"class":63},"}\n",[16,82,83],{},"Then we can write our animation:",[44,85,87],{"className":46,"code":86,"language":48,"meta":49,"style":49},".container {\n    height: 0;\n    transition: height 0.2s;\n}\n\n.container.is-open {\n    height: auto; \u002F* We can now animate the height with the 'auto' keyword! *\u002F\n}\n",[25,88,89,97,111,128,133,140,148,165],{"__ignoreMap":49},[53,90,91,95],{"class":55,"line":56},[53,92,94],{"class":93},"sScJk",".container",[53,96,64],{"class":63},[53,98,99,102,105,108],{"class":55,"line":67},[53,100,101],{"class":70},"    height",[53,103,104],{"class":63},": ",[53,106,107],{"class":70},"0",[53,109,110],{"class":63},";\n",[53,112,113,116,119,122,126],{"class":55,"line":77},[53,114,115],{"class":70},"    transition",[53,117,118],{"class":63},": height ",[53,120,121],{"class":70},"0.2",[53,123,125],{"class":124},"szBVR","s",[53,127,110],{"class":63},[53,129,131],{"class":55,"line":130},4,[53,132,80],{"class":63},[53,134,136],{"class":55,"line":135},5,[53,137,139],{"emptyLinePlaceholder":138},true,"\n",[53,141,143,146],{"class":55,"line":142},6,[53,144,145],{"class":93},".container.is-open",[53,147,64],{"class":63},[53,149,151,153,155,158,161],{"class":55,"line":150},7,[53,152,101],{"class":70},[53,154,104],{"class":63},[53,156,157],{"class":70},"auto",[53,159,160],{"class":63},"; ",[53,162,164],{"class":163},"sJ8bj","\u002F* We can now animate the height with the 'auto' keyword! *\u002F\n",[53,166,168],{"class":55,"line":167},8,[53,169,80],{"class":63},[11,171,173],{"id":172},"browser-support","Browser Support",[16,175,176,181],{},[30,177,180],{"href":178,"rel":179},"https:\u002F\u002Fcaniuse.com\u002Fmdn-css_properties_interpolate-size_allow-keywords",[34],"Browser support"," is getting there but still not available in Safari or Firefox... go figure.",[183,184,185],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":49,"searchDepth":67,"depth":67,"links":187},[188,189,190],{"id":13,"depth":67,"text":14},{"id":38,"depth":67,"text":39},{"id":172,"depth":67,"text":173},null,"We can now \"mostly\" animate height auto in CSS now!","md","fresh",{},"\u002Fcache\u002F2025\u002F03\u002Fanimating-height-auto",{"title":5,"description":192},"animating-height-auto","active","cache\u002F2025\u002F03\u002Fanimating-height-auto",[48],"NHb8MGzxKqPWilNMFlYuREvHssAPZjefUZ04FvWvIN4",1782502285691]