Reports

Is this the animation that you're looking for?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Animation Test</title>
</head>

<body>
    <h1>Animation Test</h1>
    <div id="thing"></div>
</body>

</html>

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;
  --currentScale : 1;
}

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

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

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

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

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

79824342