Answers for "Animate <details> tag"

Animate <details> tag

<!-- Hello world! This is my answer for "Animate <details> tag".
It's a pretty good option to do this.
Sorry the CSS is minified... To get the formatted css version, google
"greeper 27520274".
-->
<article>
  <h1>How to create a pop-up without JavaScript</h1>
  <p>Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:</p>
  <ol>
    <li>Add a <code>&lt;details&gt;</code> and <code>&lt;summary&gt;</code> to your document</li> 
    <li>Insert a <code>&lt;div&gt;</code> to your <code>&lt;details&gt;</code> element</li>
    <li>Add a scaling animation to this <code>&lt;div&gt;</code></li>
    <li>Add this animation to the <code>&lt;div&gt;</code> when the <code>[open]</code> attribute is toggled on the <code>&lt;details&gt;</code> element</li>
  </ol>
  <p>Toggle the <strong>How it works</strong> button for more info.</p>

</article>

<details>
  <summary>How it works<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle><circle cx="128" cy="180" r="12"></circle><path d="M127.9995,144.0045v-8a28,28,0,1,0-28-28" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></path></svg></summary>
  <div>
     <p>Hello world!</p>
  </div>
</details>


<style>
  /* To get the formatted css version, google
"greeper 27520274". */
@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap);*,:after,:before{box-sizing:border-box}body{font-family:Inter,sans-serif;line-height:1.5;min-height:100vh;background-color:#f4f5f7;padding-top:10vh;padding-bottom:10vh}strong{font-weight:600}article{width:90%;max-width:600px;margin-left:auto;margin-right:auto;font-size:1.125rem;padding:2rem;background-color:#fff;border-radius:10px;box-shadow:0 15px 20px -10px rgba(0,0,0,.1)}article>*+*{margin-top:1em}article:is(h1,h2,h3)+*{margin-top:.5em}article h1{font-weight:900;font-size:2rem;line-height:1.125}article code{background-color:#eee;font-weight:600;font-family:monospace}article ol{counter-reset:sickstuff}article ol li{position:relative;padding-left:32px;counter-increment:sickstuff}article ol li+li{margin-top:.5em}article ol li:before{content:counter(sickstuff);width:24px;height:24px;position:absolute;left:0;top:calc((1.125rem * 1.5) - 24px);font-size:.75em;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background-color:#185adb;color:#fff;font-weight:600}details{position:fixed;right:1rem;bottom:1rem;margin-top:2rem;color:#6b7280;display:flex;flex-direction:column}details div{background-color:#fff;box-shadow:0 5px 10px rgba(0,0,0,.15);padding:1.25rem;border-radius:8px;position:absolute;max-height:calc(100vh - 100px);width:400px;max-width:calc(100vw - 2rem);bottom:calc(100% + 1rem);right:0;overflow:auto;transform-origin:100% 100%;color:#000}details div::-webkit-scrollbar{width:15px;background-color:#fff}details div::-webkit-scrollbar-thumb{width:5px;border-radius:99em;background-color:#95a3b9;border:5px solid #fff}details div>*+*{margin-top:.75em}details div p>code{font-size:1rem;font-family:monospace}details div pre{white-space:pre-line;border:1px solid #95a3b9;border-radius:6px;font-family:monospace;padding:.75em;font-size:.875rem;color:#000}details[open] div{-webkit-animation:scale .25s ease;animation:scale .25s ease}summary{display:inline-flex;margin-left:auto;margin-right:auto;justify-content:center;align-items:center;font-weight:600;padding:.75em 3em .75em 1.25em;border-radius:99em;color:#fff;background-color:#185adb;box-shadow:0 5px 15px rgba(0,0,0,.1);list-style:none;text-align:center;cursor:pointer;transition:.15s ease;position:relative}summary::-webkit-details-marker{display:none}summary:focus,summary:hover{background-color:#1348af}summary svg{position:absolute;right:1.25em;top:50%;transform:translateY(-50%);width:1.5em;height:1.5em}@-webkit-keyframes scale{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes scale{0%{transform:scale(0)}100%{transform:scale(1)}}
</style>