Как сделать чтобы попап не просто открывался а выезжал?

[ja0je]

Есть кнопка по нажатию на которую открывается попап, но нужно чтобы этот попап не просто открывался, а плавно выезжал из под этой кнопки и заезжал обратно при повторном нажатии на эту кнопку без jQuery. Не подскажите как сделать такое?

Ссылка на код который есть сейчас https://jsfiddle.net/ak2pbq24/10/

[void()]

Для анимации нужно использовать какие-либо свойства, имеющие числовые значения.

Сейчас модальное окно прячется и отображается с помощью свойства display: none/block. Это свойство не может быть анимировано.

Попробуйте использовать числовые свойства, такие как opacity, top, left, width, height.

Самый классный эффект получается при неравномерной анимации. Например, сначала стартует увеличение высоты блока, а затем его ширины. Т.е. эти свойства анимируются с разной задержкой и разной скоростью.

Классы для экспериментов: .search_modal и .search_modal_show
+ пригодится свойство transition: all .5s;

[рони]

ja0je,
https://jsfiddle.net/ak2pbq24/39/

[ja0je]

Это то что мне нужно, большое вам спасибо за то что ответили)