Как сделать анимацию трансформирующую один элемент в другой?

Question

[Listrigon]

Обладая достаточно посредственными знаниями CSS не могу понять как делается такая анимация.
Т.е. один элемент- кнопка превращается в другой - целую форму.


Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?
Мой единственный вариант, что кнопке создается анимация, меняющая ее геометрию с круга на квадрат и выставляющая ее в абсолютное положение ровно над скрытым элементом формы, после окончания анимации кнопка прячется, а форма делается видимой, но для этого нужен JS?

Comments

[Павел Антонов]

ну если в упрощенном виде то все как вы и написали. https://codepen.io/freislot/pen/KGYqbd

[Listrigon]

Спасибо.

Answer 1

[Ivan Bogachev]

Является ли желтая квадратная форма в конце анимации видоизмененной кнопкой или же это совершенно другой элемент разметки?

По смыслу - это другой элемент. Если мы говорим про более-менее компонентный подход к верстке, то это должно быть очевидно. Кнопка - один компонент. Всплывающее окошко - другой компонент. Набросал небольшую заготовку:


С такими анимациями можно долго играться, самое главное - проверить в конечном итоге кроссбраузерность. А то в хроме и FF работает, а в каком-нибудь IE всякое может случиться.

P.S.: Но в целом - я голосую за реализацию таких вещей целиком на JS. Практика показывает, что в проектах с такими анимациями очень быстро собирается большое количество одновременно анимирующихся значений у большого количества элементов, которые нужно синхронизировать между собой. На CSS голова лопнет все это делать. И да, чем больше всего меняется в CSS-анимациях в единицу времени, тем выше шанс найти какой-нибудь редкий баг и долго ломать себе голову в поисках проблемы. Лучше уж взять какую-нибудь библиотеку вроде anime.js или любимый многими GSAP и использовать их.