I have an HTML div that contains a photo, amongst other things. This div is movable by the user with a click and drag. When the div is clicked (:active), after a slight delay, I have it grow slightly then when the button is released it will scale down to 0. The delay is added so that if the user simply clicks on the div that it will close without growing, but if there is a click and hold then it will grow.

The problem is that after a press, wait, hold and release the div will shrink from 100% instead of the scaled up version (1.2 in the example here), causing a non-smooth start of the scale down.

Is there a way to have that transition scale down start from whatever scale level it is at (be it at 1.0, 1.2 or anywhere in between)?

The simplified version here will have a 1 second delay before it starts to grow and take 2 seconds to grow and 2 seconds to shrink.

const thing = document.getElementById("thing");

thing.addEventListener("animationend", () => { thing.style.setProperty("animation-name", "none"); });
thing.addEventListener("click", () => { thing.style.setProperty("animation-name", "scale-down"); });

div#thing {
    position: absolute;
    background-color: cyan;
    outline: 1px solid black;
    left : 25%;
    top : 25%;
    width : 50%;
    height : 50%;
    animation-name: none;
    animation-duration: 2s;
}

div#thing:active
{
    transition: transform 2s;
    transition-delay : 1s;
    transform: scale(1.2);
}

@keyframes scale-down
{
    0% { transform: scale(1); }
    100% { transform: scale(0); }
}

    
    




Animation Test