[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"verticals":3,"article-css-starting-style-entry-animations":32,"code:js:true:tn7p70":209,"code:css:true:1nqjhr6":210,"code:css:true:18y63zw":211,"code:css:true:vy1alv":212},[4,20],{"id":5,"slug":6,"name":7,"tagline":8,"description":9,"accentFrom":10,"accentTo":11,"icon":12,"defaultLocale":13,"locales":14,"features":16,"position":19},"019fe637-3d33-714b-b57f-23e163ffca0c","dev","Web Development","Build. Learn. Ship.","Practical courses, engineering-grade articles and open-source tools for people who ship.","violet-500","cyan-400","◇","en",[13,15],"fa",{"courses":17,"paths":17,"articles":17,"exams":18,"flashcards":18,"packages":17,"community":17,"certificates":17,"teams":17,"commerce":17},true,false,0,{"id":21,"slug":22,"name":23,"tagline":24,"description":25,"accentFrom":26,"accentTo":10,"icon":27,"defaultLocale":13,"locales":28,"features":30,"position":31},"019fe637-3dc2-754c-8657-0f175bfee7c6","lang","Languages","Learn a language the way you learn a codebase.","Structured paths, listening drills and spaced repetition that actually sticks.","amber-400","⌘",[13,15,29],"es",{"courses":17,"paths":17,"articles":18,"exams":18,"flashcards":18,"packages":18,"community":17,"certificates":18,"teams":18,"commerce":17},2,{"id":33,"slug":34,"title":35,"subtitle":36,"excerpt":37,"coverUrl":38,"locale":13,"readingMinutes":39,"publishedAt":40,"viewCount":41,"likeCount":19,"commentCount":19,"author":42,"vertical":47,"topic":48,"tags":51,"_count":63,"playground":65,"body":67,"bodyMd":191,"seo":192,"translationGroupId":196,"thread":197,"assessments":199,"translations":205,"quiz":207},"019fe660-7d17-745b-812d-b1e81a1b2b85","css-starting-style-entry-animations","You use a setTimeout to trigger CSS entry animations. `@starting-style` makes it unnecessary.",null,"Before `@starting-style`, the moment an element entered the DOM was invisible to CSS — transitions had no 'before' state to interpolate from. The at-rule gives you one, natively, with no JavaScript required.","\u002Fmedia\u002Fcovers\u002Fcss-starting-style-entry-animations.png",4,"2026-07-25T08:13:02.298Z",53,{"id":43,"name":44,"username":45,"avatarUrl":36,"headline":46},"019fe637-3c25-7088-9034-39c9f15dc3c8","Parsa Jiravand","parsa","Frontend engineer · building bestpractic",{"slug":6,"name":7,"accentFrom":10,"accentTo":11},{"slug":49,"name":50},"css","CSS",[52,54,57,60],{"slug":49,"name":53,"color":36},"Css",{"slug":55,"name":56,"color":36},"webdev","Webdev",{"slug":58,"name":59,"color":36},"frontend","Frontend",{"slug":61,"name":62,"color":36},"javascript","Javascript",{"assessments":64},1,{"slug":34,"title":66},"@starting-style — interactive playground",{"blocks":68,"version":64},[69,73,79,82,85,90,93,97,100,103,106,109,112,115,119,122,125,129,132,136,139,143,146,149,152,155,158,161,164,167,170,173,176,179,182],{"id":70,"html":71,"type":72},"b1","\u003Cp>Here is a pattern almost every frontend developer has written:\u003C\u002Fp>","paragraph",{"id":74,"code":75,"type":76,"language":77,"highlight":78},"b2","el.style.opacity = '0';\nel.style.transform = 'translateY(8px)';\ndocument.body.appendChild(el);\n\nrequestAnimationFrame(() => {\n  requestAnimationFrame(() => {\n    el.style.opacity = '1';\n    el.style.transform = 'translateY(0)';\n  });\n});","code","js",[],{"id":80,"html":81,"type":72},"b3","\u003Cp>Two \u003Ccode>requestAnimationFrame\u003C\u002Fcode> calls. Both are a hack. The first lets the browser commit the initial state to the render tree; the second triggers the transition. You may know the alternatives — a zero-millisecond \u003Ccode>setTimeout\u003C\u002Fcode>, a \u003Ccode>void el.offsetWidth\u003C\u002Fcode> reflow, or adding a class one tick after mount — but all of them are working around the same limitation.\u003C\u002Fp>",{"id":83,"html":84,"type":72},"b4","\u003Cp>CSS \u003Ccode>transition\u003C\u002Fcode> interpolates between a \u003Cem>before\u003C\u002Fem> state and an \u003Cem>after\u003C\u002Fem> state. When an element first appears in the DOM, there is no before state — the element simply did not exist. \u003Ccode>@starting-style\u003C\u002Fcode> was introduced to fill that gap.\u003C\u002Fp>",{"id":86,"html":87,"text":88,"type":89,"level":31},"b5","What \u003Ccode>@starting-style\u003C\u002Fcode> does","What @starting-style does","heading",{"id":91,"html":92,"type":72},"b6","\u003Cp>\u003Ccode>@starting-style\u003C\u002Fcode> is an at-rule that lets you declare styles for an element \u003Cem>before its first rendered frame\u003C\u002Fem>. The browser uses those styles as the starting point for transitions when the element enters the page.\u003C\u002Fp>",{"id":94,"code":95,"type":76,"language":49,"highlight":96},"b7",".notification {\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n@starting-style {\n  .notification {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n}",[],{"id":98,"html":99,"type":72},"b8","\u003Cp>When \u003Ccode>.notification\u003C\u002Fcode> is inserted into the DOM, the browser reads \u003Ccode>@starting-style\u003C\u002Fcode> for the initial values and immediately transitions to the regular computed styles. The result is a smooth fade-and-slide-up — with zero JavaScript. No double rAF, no class toggle, no forced reflow.\u003C\u002Fp>",{"id":101,"html":102,"type":72},"b9","\u003C!-- playground:start -->",{"id":104,"html":105,"text":105,"type":89,"level":31},"b10","🎮 Try it yourself",{"id":107,"html":108,"type":72},"b11","\u003Cp>\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-25-css-starting-style-entry-animations\u002Fplayground\u002F\">▶️ Open the interactive playground →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":110,"html":111,"type":72},"b12","\u003Cp>\u003Cem>Runs right in your browser — poke at it and watch the concept react live.\u003C\u002Fem>\u003C\u002Fp>",{"id":113,"html":114,"type":72},"b13","\u003C!-- playground:end -->",{"id":116,"html":117,"text":118,"type":89,"level":31},"b14","Animating elements out of \u003Ccode>display: none\u003C\u002Fcode>","Animating elements out of display: none",{"id":120,"html":121,"type":72},"b15","\u003Cp>The second major use case is toggling visibility with \u003Ccode>display: none\u003C\u002Fcode>. Setting an element to \u003Ccode>display: block\u003C\u002Fcode> used to be incompatible with transitions: the element jumped from "not painted" to "painted" in a single frame, giving the transition engine nothing to work with.\u003C\u002Fp>",{"id":123,"html":124,"type":72},"b16","\u003Cp>With \u003Ccode>@starting-style\u003C\u002Fcode> and the new \u003Ccode>allow-discrete\u003C\u002Fcode> keyword, you can animate both the enter and exit:\u003C\u002Fp>",{"id":126,"code":127,"type":76,"language":49,"highlight":128},"b17",".drawer {\n  display: none;\n  opacity: 0;\n  transform: translateX(-16px);\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease,\n    display 0.25s allow-discrete;\n}\n\n.drawer.open {\n  display: block;\n  opacity: 1;\n  transform: translateX(0);\n}\n\n@starting-style {\n  .drawer.open {\n    opacity: 0;\n    transform: translateX(-16px);\n  }\n}",[],{"id":130,"html":131,"type":72},"b18","\u003Cp>\u003Ccode>allow-discrete\u003C\u002Fcode> tells the browser that \u003Ccode>display\u003C\u002Fcode> is being deliberately transitioned: on enter it switches to \u003Ccode>block\u003C\u002Fcode> immediately so the element is visible during the animation; on exit it holds \u003Ccode>block\u003C\u002Fcode> until the transition completes before switching to \u003Ccode>none\u003C\u002Fcode>. Combined with \u003Ccode>@starting-style\u003C\u002Fcode> for the enter side, you get matching enter and exit animations from purely declarative CSS.\u003C\u002Fp>",{"id":133,"html":134,"text":135,"type":89,"level":31},"b19","With native \u003Ccode>popover\u003C\u002Fcode> and \u003Ccode><dialog>\u003C\u002Fcode>","With native popover and \u003Cdialog>",{"id":137,"html":138,"type":72},"b20","\u003Cp>\u003Ccode>@starting-style\u003C\u002Fcode> pairs especially well with the Popover API and \u003Ccode><dialog>\u003C\u002Fcode>, which toggle between top-layer states. There's one extra property to handle: \u003Ccode>overlay\u003C\u002Fcode>, which controls whether the element stays in the top layer while an exit animation runs.\u003C\u002Fp>",{"id":140,"code":141,"type":76,"language":49,"highlight":142},"b21","[popover] {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 0.2s ease,\n    transform 0.2s ease,\n    display 0.2s allow-discrete,\n    overlay 0.2s allow-discrete;\n}\n\n[popover]:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n@starting-style {\n  [popover]:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}",[],{"id":144,"html":145,"type":72},"b22","\u003Cp>Without transitioning \u003Ccode>overlay\u003C\u002Fcode>, the popover is pulled out of the top layer before the exit transition finishes — it disappears instantly. With \u003Ccode>allow-discrete\u003C\u002Fcode> on both \u003Ccode>display\u003C\u002Fcode> and \u003Ccode>overlay\u003C\u002Fcode>, the element stays rendered and on top until the animation completes, then the browser cleans it up. You get a polished open\u002Fclose pair with no JavaScript involvement at all.\u003C\u002Fp>",{"id":147,"html":148,"text":148,"type":89,"level":31},"b23","Browser support and graceful degradation",{"id":150,"html":151,"type":72},"b24","\u003Cp>\u003Ccode>@starting-style\u003C\u002Fcode> shipped in \u003Cstrong>Chrome 117\u003C\u002Fstrong> (September 2023), \u003Cstrong>Firefox 129\u003C\u002Fstrong> (August 2024), and \u003Cstrong>Safari 17.5\u003C\u002Fstrong> (May 2024). It has broadly available baseline support as of mid-2025.\u003C\u002Fp>",{"id":153,"html":154,"type":72},"b25","\u003Cp>For older browsers, the \u003Ccode>@starting-style\u003C\u002Fcode> block is silently ignored — elements appear without an entry animation rather than breaking. That is exactly the right degradation: the animation is an enhancement, not a requirement. You do not need a polyfill.\u003C\u002Fp>",{"id":156,"html":157,"type":72},"b26","\u003C!-- quiz:start -->",{"id":159,"html":160,"text":160,"type":89,"level":31},"b27","🧠 Test yourself",{"id":162,"html":163,"type":72},"b28","\u003Cp>Think it clicked? \u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-25-css-starting-style-entry-animations\">Take the 6-question quiz →\u003C\u002Fa>\u003C\u002Fstrong>\u003C\u002Fp>",{"id":165,"html":166,"type":72},"b29","\u003Cp>\u003Cem>Instant feedback, a hint on every question, and an explanation for each answer — right or wrong.\u003C\u002Fem>\u003C\u002Fp>",{"id":168,"html":169,"type":72},"b30","\u003C!-- quiz:end -->",{"id":171,"html":172,"text":172,"type":89,"level":31},"b31","The takeaway",{"id":174,"html":175,"type":72},"b32","\u003Cp>The double-rAF trick and the zero-millisecond \u003Ccode>setTimeout\u003C\u002Fcode> exist because CSS transitions need a "before" state, and there was no native way to provide one for elements entering the DOM. \u003Ccode>@starting-style\u003C\u002Fcode> is that native way. If your code applies a class one tick after mount, or toggles a data attribute to kick off an enter animation, look at whether \u003Ccode>@starting-style\u003C\u002Fcode> can replace it. The browser handles the timing correctly by definition; your JavaScript approximation might not.\u003C\u002Fp>",{"id":177,"type":178},"b33","divider",{"id":180,"html":181,"type":72},"b34","\u003Cp>\u003Cem>Thanks for reading! Let's stay connected:\u003C\u002Fem>\u003C\u002Fp>",{"id":183,"type":184,"items":185,"ordered":18},"b35","list",[186,187,188,189,190],"⭐ \u003Cstrong>GitHub\u003C\u002Fstrong> — follow me and star the projects: \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fparsajiravand\">github.com\u002Fparsajiravand\u003C\u002Fa>","💬 \u003Cstrong>Discord\u003C\u002Fstrong> — join the frontend best-practices community: \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ\">discord.gg\u002Fd9KRhuAwQ\u003C\u002Fa>","📸 \u003Cstrong>Instagram\u003C\u002Fstrong> — frontend best practices, daily: \u003Ca href=\"https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F\">@bestpractice___\u003C\u002Fa>","💼 \u003Cstrong>LinkedIn\u003C\u002Fstrong> — \u003Ca href=\"https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F\">linkedin.com\u002Fin\u002Fparsa-jiravand\u003C\u002Fa>","✉️ \u003Cstrong>Email\u003C\u002Fstrong> (work & contract inquiries): \u003Ca href=\"mailto:bestpractice2026@gmail.com\">bestpractice2026@gmail.com\u003C\u002Fa>","Here is a pattern almost every frontend developer has written:\n\n```js\nel.style.opacity = '0';\nel.style.transform = 'translateY(8px)';\ndocument.body.appendChild(el);\n\nrequestAnimationFrame(() => {\n  requestAnimationFrame(() => {\n    el.style.opacity = '1';\n    el.style.transform = 'translateY(0)';\n  });\n});\n```\n\nTwo `requestAnimationFrame` calls. Both are a hack. The first lets the browser commit the initial state to the render tree; the second triggers the transition. You may know the alternatives — a zero-millisecond `setTimeout`, a `void el.offsetWidth` reflow, or adding a class one tick after mount — but all of them are working around the same limitation.\n\nCSS `transition` interpolates between a *before* state and an *after* state. When an element first appears in the DOM, there is no before state — the element simply did not exist. `@starting-style` was introduced to fill that gap.\n\n## What `@starting-style` does\n\n`@starting-style` is an at-rule that lets you declare styles for an element *before its first rendered frame*. The browser uses those styles as the starting point for transitions when the element enters the page.\n\n```css\n.notification {\n  opacity: 1;\n  transform: translateY(0);\n  transition: opacity 0.3s ease, transform 0.3s ease;\n}\n\n@starting-style {\n  .notification {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n}\n```\n\nWhen `.notification` is inserted into the DOM, the browser reads `@starting-style` for the initial values and immediately transitions to the regular computed styles. The result is a smooth fade-and-slide-up — with zero JavaScript. No double rAF, no class toggle, no forced reflow.\n\n\u003C!-- playground:start -->\n\n## 🎮 Try it yourself\n\n**[▶️ Open the interactive playground →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fposts\u002F2026-07-25-css-starting-style-entry-animations\u002Fplayground\u002F)**\n\n_Runs right in your browser — poke at it and watch the concept react live._\n\n\u003C!-- playground:end -->\n\n## Animating elements out of `display: none`\n\nThe second major use case is toggling visibility with `display: none`. Setting an element to `display: block` used to be incompatible with transitions: the element jumped from \"not painted\" to \"painted\" in a single frame, giving the transition engine nothing to work with.\n\nWith `@starting-style` and the new `allow-discrete` keyword, you can animate both the enter and exit:\n\n```css\n.drawer {\n  display: none;\n  opacity: 0;\n  transform: translateX(-16px);\n  transition:\n    opacity 0.25s ease,\n    transform 0.25s ease,\n    display 0.25s allow-discrete;\n}\n\n.drawer.open {\n  display: block;\n  opacity: 1;\n  transform: translateX(0);\n}\n\n@starting-style {\n  .drawer.open {\n    opacity: 0;\n    transform: translateX(-16px);\n  }\n}\n```\n\n`allow-discrete` tells the browser that `display` is being deliberately transitioned: on enter it switches to `block` immediately so the element is visible during the animation; on exit it holds `block` until the transition completes before switching to `none`. Combined with `@starting-style` for the enter side, you get matching enter and exit animations from purely declarative CSS.\n\n## With native `popover` and `\u003Cdialog>`\n\n`@starting-style` pairs especially well with the Popover API and `\u003Cdialog>`, which toggle between top-layer states. There's one extra property to handle: `overlay`, which controls whether the element stays in the top layer while an exit animation runs.\n\n```css\n[popover] {\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity 0.2s ease,\n    transform 0.2s ease,\n    display 0.2s allow-discrete,\n    overlay 0.2s allow-discrete;\n}\n\n[popover]:popover-open {\n  opacity: 1;\n  transform: scale(1);\n}\n\n@starting-style {\n  [popover]:popover-open {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n```\n\nWithout transitioning `overlay`, the popover is pulled out of the top layer before the exit transition finishes — it disappears instantly. With `allow-discrete` on both `display` and `overlay`, the element stays rendered and on top until the animation completes, then the browser cleans it up. You get a polished open\u002Fclose pair with no JavaScript involvement at all.\n\n## Browser support and graceful degradation\n\n`@starting-style` shipped in **Chrome 117** (September 2023), **Firefox 129** (August 2024), and **Safari 17.5** (May 2024). It has broadly available baseline support as of mid-2025.\n\nFor older browsers, the `@starting-style` block is silently ignored — elements appear without an entry animation rather than breaking. That is exactly the right degradation: the animation is an enhancement, not a requirement. You do not need a polyfill.\n\n\u003C!-- quiz:start -->\n\n## 🧠 Test yourself\n\nThink it clicked? **[Take the 6-question quiz →](https:\u002F\u002Fdaily-post-dev.netlify.app\u002Fquiz\u002Ftake.html?post=2026-07-25-css-starting-style-entry-animations)**\n\n_Instant feedback, a hint on every question, and an explanation for each answer — right or wrong._\n\n\u003C!-- quiz:end -->\n\n## The takeaway\n\nThe double-rAF trick and the zero-millisecond `setTimeout` exist because CSS transitions need a \"before\" state, and there was no native way to provide one for elements entering the DOM. `@starting-style` is that native way. If your code applies a class one tick after mount, or toggles a data attribute to kick off an enter animation, look at whether `@starting-style` can replace it. The browser handles the timing correctly by definition; your JavaScript approximation might not.\n\n---\n\n*Thanks for reading! Let's stay connected:*\n\n- ⭐ **GitHub** — follow me and star the projects: [github.com\u002Fparsajiravand](https:\u002F\u002Fgithub.com\u002Fparsajiravand)\n- 💬 **Discord** — join the frontend best-practices community: [discord.gg\u002Fd9KRhuAwQ](https:\u002F\u002Fdiscord.gg\u002Fd9KRhuAwQ)\n- 📸 **Instagram** — frontend best practices, daily: [@bestpractice___](https:\u002F\u002Fwww.instagram.com\u002Fbestpractice___\u002F)\n- 💼 **LinkedIn** — [linkedin.com\u002Fin\u002Fparsa-jiravand](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fparsa-jiravand\u002F)\n- ✉️ **Email** (work & contract inquiries): [bestpractice2026@gmail.com](mailto:bestpractice2026@gmail.com)",{"title":193,"canonical":194,"description":195},"You use a setTimeout to trigger CSS entry animations. `@starting-style","https:\u002F\u002Fbestpractic.org\u002Fblog\u002Fcss-starting-style-entry-animations","Before `@starting-style`, the moment an element entered the DOM was invisible to CSS — transitions had no 'before' state to interpolate from. The at-rule gives you one, natively, w","019fe660-7d17-745b-812d-b78630e94999",{"id":198,"locked":18},"019fe660-83fc-741c-90a8-b674c86aabbc",[200],{"id":201,"slug":34,"title":202,"_count":203},"019fe776-7919-7118-9b6a-a4301943455f","@starting-style entry animations",{"questions":204},6,[206],{"locale":13,"slug":34},{"id":201,"slug":34,"title":202,"_count":208,"questionCount":204},{"questions":204},"\u003Cdiv class=\"shj shj-lang-js shj-multiline\" data-lang=\"js\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">el\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>style\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>opacity \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'0'\u003C\u002Fspan>;\nel\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>style\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>transform \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'translateY(8px)'\u003C\u002Fspan>;\ndocument\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>body\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>\u003Cspan class=\"shj-func\">appendChild\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>el\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\n\u003Cspan class=\"shj-func\">requestAnimationFrame\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-func\">requestAnimationFrame\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan> \u003Cspan class=\"shj-kwd\">=>\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    el\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>style\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>opacity \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'1'\u003C\u002Fspan>;\n    el\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>style\u003Cspan class=\"shj-oper\">.\u003C\u002Fspan>transform \u003Cspan class=\"shj-oper\">=\u003C\u002Fspan> \u003Cspan class=\"shj-str\">'translateY(0)'\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.notification\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">translateY\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transition\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">opacity\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.3\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>, \u003Cspan class=\"shj-num\">transform\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.3\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@starting\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">-style\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.notification\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">translateY\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">12\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003Cdiv>17\u003C\u002Fdiv>\u003Cdiv>18\u003C\u002Fdiv>\u003Cdiv>19\u003C\u002Fdiv>\u003Cdiv>20\u003C\u002Fdiv>\u003Cdiv>21\u003C\u002Fdiv>\u003Cdiv>22\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-var\">.drawer\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">display\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">none\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">translateX\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>-\u003Cspan class=\"shj-num\">16\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transition\u003C\u002Fspan>:\n    \u003Cspan class=\"shj-num\">opacity\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.25\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-num\">transform\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.25\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-num\">display\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.25\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">allow-discrete\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-var\">.drawer\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.open\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">display\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">block\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">translateX\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@starting\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">-style\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">.drawer\u003C\u002Fspan>\u003Cspan class=\"shj-var\">.open\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">translateX\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>-\u003Cspan class=\"shj-num\">16\u003C\u002Fspan>\u003Cspan class=\"shj-var\">px\u003C\u002Fspan>\u003Cspan class=\"shj-num\">\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>","\u003Cdiv class=\"shj shj-lang-css shj-multiline\" data-lang=\"css\">\u003Cdiv class=\"shj-scroll\">\u003Cdiv class=\"shj-numbers\">\u003Cdiv>1\u003C\u002Fdiv>\u003Cdiv>2\u003C\u002Fdiv>\u003Cdiv>3\u003C\u002Fdiv>\u003Cdiv>4\u003C\u002Fdiv>\u003Cdiv>5\u003C\u002Fdiv>\u003Cdiv>6\u003C\u002Fdiv>\u003Cdiv>7\u003C\u002Fdiv>\u003Cdiv>8\u003C\u002Fdiv>\u003Cdiv>9\u003C\u002Fdiv>\u003Cdiv>10\u003C\u002Fdiv>\u003Cdiv>11\u003C\u002Fdiv>\u003Cdiv>12\u003C\u002Fdiv>\u003Cdiv>13\u003C\u002Fdiv>\u003Cdiv>14\u003C\u002Fdiv>\u003Cdiv>15\u003C\u002Fdiv>\u003Cdiv>16\u003C\u002Fdiv>\u003Cdiv>17\u003C\u002Fdiv>\u003Cdiv>18\u003C\u002Fdiv>\u003Cdiv>19\u003C\u002Fdiv>\u003Cdiv>20\u003C\u002Fdiv>\u003Cdiv>21\u003C\u002Fdiv>\u003C\u002Fdiv>\u003Cdiv class=\"shj-code\">\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">popover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">scale\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0.95\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transition\u003C\u002Fspan>:\n    \u003Cspan class=\"shj-num\">opacity\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.2\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-num\">transform\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.2\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">ease\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-num\">display\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.2\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">allow-discrete\u003C\u002Fspan>,\n    \u003Cspan class=\"shj-num\">overlay\u003C\u002Fspan> \u003Cspan class=\"shj-num\">0.2\u003C\u002Fspan>s \u003Cspan class=\"shj-num\">allow-discrete\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">popover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-var\">:popover-open\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">1\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">scale\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">1\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\n\u003Cspan class=\"shj-kwd\">@starting\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">-style\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n  \u003Cspan class=\"shj-bracket\">[\u003C\u002Fspan>\u003Cspan class=\"shj-kwd\">popover\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">]\u003C\u002Fspan>\u003Cspan class=\"shj-var\">:popover-open\u003C\u002Fspan> \u003Cspan class=\"shj-bracket\">{\u003C\u002Fspan>\n    \u003Cspan class=\"shj-var\">opacity\u003C\u002Fspan>: \u003Cspan class=\"shj-num\">0\u003C\u002Fspan>;\n    \u003Cspan class=\"shj-var\">transform\u003C\u002Fspan>: \u003Cspan class=\"shj-func\">scale\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">(\u003C\u002Fspan>\u003Cspan class=\"shj-num\">0.95\u003C\u002Fspan>\u003Cspan class=\"shj-bracket\">)\u003C\u002Fspan>;\n  \u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\n\u003Cspan class=\"shj-bracket\">}\u003C\u002Fspan>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>"]