How to make an animation that transforms one element into another?

Question

Animation

With a fairly mediocre knowledge of CSS, I can not understand how such an animation is done.
Those. one element - the button turns into another - the whole form.

Is the yellow square shape at the end of the animation a modified button, or is it a completely different markup element?
My only option is that the button is animated, changing its geometry from a circle to a square and exposing it to an absolute position exactly above the hidden form element, after the animation is over, the button is hidden and the form is made visible, but does this require JS?

Answer 1

Is the yellow square shape at the end of the animation a modified button, or is it a completely different markup element?

Meaning, it's a different element. If we are talking about a more or less component approach to layout, then this should be obvious. The button is one component. The popup window is another component. I sketched a small blank:
You can play with such animations for a long time, the most important thing is to check cross-browser compatibility in the end. And then in chrome and FF it works, but in some IE anything can happen.
PS: But in general - I vote for the implementation of such things entirely in JS. Practice shows that in projects with such animations, a large number of simultaneously animated values ​​are collected very quickly for a large number of elements that need to be synchronized with each other. On CSS head will burst all this. And yes, the more things change in CSS animations per unit of time, the higher the chance to find some rare bug and puzzle yourself for a long time in search of a problem. It's better to take some library like anime.js or the favorite of many GSAP and use them.