ARTICLE AD BOX
When opened, the dialog suddenly goes from display: none to a visible open state. starting:open:* defines the temporary starting state at that moment, while open:* defines the final state that the browser animates to.
So use starting:open:translate-y-full starting:open:opacity-0 instead of starting:translate-y-full starting:opacity-0.
<script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss-browser/4.1.13/index.global.js"></script>
<button commandfor="c1-modal" command="show-modal" class="p-2 border rounded-xl m-4">Show</button>
<dialog
closedby="any"
class="
border border-b-0 border-slate-200 bg-white rounded-t-xl bg-white p-6 shadow-2xl
fixed inset-x-0 top-auto bottom-0 m-0 translate-y-full w-full max-w-none
backdrop:bg-black/50
transition-[translate,opacity,display,overlay] duration-200 ease-out transition-discrete
backdrop:transition-opacity backdrop:duration-200
translate-y-full opacity-0
open:translate-y-0 open:opacity-100
starting:open:translate-y-full starting:open:opacity-0
backdrop:starting:opacity-0 backdrop:open:opacity-100
"
id="c1-modal"
>
<div class="text-text-primary-light dark:text-text-primary-dark flex justify-between">
<h2 class="text-2xl">Hello there</h2>
<button command="close" commandfor="c1-modal">
<span aria-hidden="true" class="material-symbols-outlined text-2xl">close</span>
</button>
</div>
</dialog>
20.1k8 gold badges57 silver badges179 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
Wonderful! Thank you for the super quick assistance!
2026-04-26T12:38:42.88Z+00:00
Explore related questions
See similar questions with these tags.
![How to stop Elementor Pro marquee from pausing on hover? [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)