Как масштабирование преобразования CSS-анимации может начаться с того места, где закончился переход? ⇐ Html

[Anonymous]

У меня есть HTML-элемент div, который, помимо прочего, содержит фотографию. Пользователь может перемещать этот div с помощью щелчка и перетаскивания. При нажатии на элемент div (:active), после небольшой задержки, он немного увеличивается, а затем, когда кнопка отпускается, он уменьшается до 0. Задержка добавляется так, что если пользователь просто нажимает на элемент div, он закрывается, не увеличиваясь, но если есть щелчок и удержание, он будет расти.
Проблема в том, что после нажатия, ожидания, удержания и отпускания элемент div сожмется со 100% вместо увеличенной версии (1.2 в примере здесь), вызывая неплавное начало масштабирования вниз.
Есть ли способ, чтобы переход вниз начинался с любого уровня масштаба (будь то 1,0, 1,2 или где-то между ними)?
Упрощенная версия здесь будет иметь задержку в 1 секунду, прежде чем она начнет расти, и потребуется 2 секунды для увеличения и 2 секунды для сжатия.

Код: Выделить всё

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




Animation Test

Подробнее здесь: https://stackoverflow.com/questions/798 ... n-left-off