JSFiddle - React, Tailwind, and code Playground

by whelkaholism

HTML

<div class="pop-up tilly">

</div>

<div class="pop-up tilly open">
ewdewfdewfwef
efdewfwefwe
</div>

CSS

/*
    TILLY ===============================================================================================================================================================
*/
.pop-up.tilly {
    opacity: 0;
    width: 100px;
    height: 0;
    background: red;
}

.pop-up.tilly.open {
    animation: 1s fadePopup;
    animation-fill-mode: forwards;
}

@keyframes fadePopup {

    0% {
        opacity: 0;
        height: auto;
    }

    1% {
        opacity: 0.1;
        height: auto;
    }

    100% {
        opacity: 1;
        height: auto;
    }
}