CSS Animierter Hintergrund mit TailwindCSS

[Rossie]

Hi,

ich möchte mit TailwindCSS ein CSS-Only Modal umsetzen, hinter dem sich sowohl bei Anzeige der Bildschirminhalt animiert verdunkeln, als auch beim Verschwinden wieder animiert erhellen soll.

Das Verdunkeln funktioniert zufriedenstellend. Aber wie löse ich eine Animation beim Schließen aus? Momentan verschwindet der Hintergrund einfach.

Hier ist der lauffähige Code: https://play.tailwindcss.com/BrEW50G7vg

Klicken auf "Show" führt das Verdunkeln aus. Zum Schließen auf die grüne Fläche klicken.

 

[Rossie]

Mit Keyframes lässt es sich wohl nicht lösen, aber wenn ich die Größe in Ruhe lasse und stattdessen das Stacking verändere, erziele ich den gewünschten Effekt:

<div class="flex flex-col items-center justify-center h-screen group">
 <input id="bbb567bf" class="peer hidden" type="checkbox">
 <label class="cursor-pointer text-4xl px-6 py-2 rounded-full border-2 border-red-600" for="bbb567bf">Show</label>
 <label class="cursor-pointer fixed block top-0 left-0 w-full h-full z-[-1] opacity-0 transform transition ease-in duration-500 peer-checked:bg-red-900 peer-checked:z-[10] peer-checked:opacity-100" for="bbb567bf"></label>
</div>