Wie kann die Skalierung einer CSS-Animationstransformation dort beginnen, wo ein Übergang aufgehört hat? ⇐ HTML

[Anonymous]

Ich habe ein HTML-Div, das unter anderem ein Foto enthält. Dieses Div kann vom Benutzer durch Klicken und Ziehen verschoben werden. Wenn auf das Div geklickt wird (:active), lasse ich es nach einer leichten Verzögerung leicht wachsen, und wenn die Taste losgelassen wird, wird es auf 0 verkleinert. Die Verzögerung wird hinzugefügt, sodass es geschlossen wird, wenn der Benutzer einfach auf das Div klickt, ohne zu wachsen, aber wenn es gedrückt und gedrückt gehalten wird, wächst es.
Das Problem besteht darin, dass das Div nach einem Drücken, Warten, Halten und Loslassen von 100 % kleiner wird als von der vergrößerten Version (1,2 im Beispiel). hier), was zu einem nicht reibungslosen Beginn des Herunterskalierens führt.
Gibt es eine Möglichkeit, dass die Herunterskalierung des Übergangs von der Skalenebene aus beginnt, auf der sie sich befindet (sei es bei 1,0, 1,2 oder irgendwo dazwischen)?
Die vereinfachte Version hier hat eine Verzögerung von 1 Sekunde, bevor sie zu wachsen beginnt, und es dauert 2 Sekunden, um zu wachsen, und 2 Sekunden, um zu schrumpfen.

Code: Select all

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

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

Code: Select all

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); }
}

Code: Select all

Animation Test




Animation Test