{"id":3996,"date":"2024-09-24T12:42:56","date_gmt":"2024-09-24T17:42:56","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=3996"},"modified":"2024-09-24T15:09:11","modified_gmt":"2024-09-24T20:09:11","slug":"arrival-of-animate-to-auto","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/arrival-of-animate-to-auto\/","title":{"rendered":"Arrival of Animate to Auto"},"content":{"rendered":"\n<p>I&#8217;m on Chrome 129 and this<a href=\"https:\/\/developer.chrome.com\/docs\/css-ui\/animate-to-height-auto\"> animate to auto stuff<\/a> is <a href=\"https:\/\/codepen.io\/chriscoyier\/pen\/VwoYZjP\">working for me<\/a> with no special flags, so color me pleased. Would love to see this go into Interop 2025, as <a href=\"https:\/\/web.dev\/blog\/interop2025-proposals?hl=en\">submissions are open<\/a>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">html<\/span> {\n  <span class=\"hljs-comment\">\/* This allows auto to be interpolated to, \n  along with min-content, max-content, and fit-content.\n  It cascades as needed. *\/<\/span>\n  <span class=\"hljs-attribute\">interpolate-size<\/span>: allow-keywords;\n}\n<span class=\"hljs-selector-class\">.el<\/span> {\n  <span class=\"hljs-attribute\">inline-size<\/span>: <span class=\"hljs-number\">80px<\/span>;\n  <span class=\"hljs-attribute\">overflow-x<\/span>: clip;\n  <span class=\"hljs-attribute\">transition<\/span>: inline-size <span class=\"hljs-number\">0.35s<\/span> ease;\n  &amp;:hover,\n  &amp;:focus-visible {\n    <span class=\"hljs-comment\">\/* Requires interpolate-size: allow-keywords; *\/<\/span>\n    <span class=\"hljs-attribute\">inline-size<\/span>: max-content;\n    <span class=\"hljs-comment\">\/* Works without, and allows for calc() stuff *\/<\/span>\n    <span class=\"hljs-attribute\">inline-size<\/span>: <span class=\"hljs-built_in\">calc-size<\/span>(max-content, size);\n  }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>I&#8217;m using <code>inline-size<\/code> and <code>max-content<\/code> there, but it could be <code>height<\/code> and <code>auto<\/code> or <code>block-size<\/code> and <code>min-content<\/code> or whatever. There are some nice demos in the post with practical stuff like arbitrary list items entering and leaving the page, and accordions opening and closing. I imagine menus will be a big use case as well.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;m on Chrome 129 and this animate to auto stuff is working for me with no special flags, so color me pleased. Would love to see this go into Interop 2025, as submissions are open. I&#8217;m using inline-size and max-content there, but it could be height and auto or block-size and min-content or whatever. There [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3998,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[100,56],"class_list":["post-3996","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-animation","tag-interop"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/09\/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIyLTA0L2pvYjY4My0wMTM4LWwxeWdicXJ6LmpwZw.webp?fit=1024%2C1024&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=3996"}],"version-history":[{"count":4,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3996\/revisions"}],"predecessor-version":[{"id":4006,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/3996\/revisions\/4006"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/3998"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=3996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=3996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=3996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}