Можно ли повторить эффект меню, без js?

Question

[Murat Atila]

Здравствуйте, наткнулся на сайт, очень сильно понравилась анимация открытия и закрытия меню, сделано у них через canvas, реально ли повторить только с помощью css? пытался сгенерировать подходящую анимацию на bounce.js, но мой вариант и близко не стоял. Подскажите какие статьи с примерами почитать про canvas, или какой нибудь фреймворк, с похожей анимацией. только не animate.css, там, к сожалению, нету такого эффекта.
Спасибо за прочтение и ответ.

Answer 1

[Sergej]

Можно с помощью SVG

Answer 2

[Дмитрий]

Вот и попробуйте собрать такую анимацию как в меню. Врядли вам удастся обойтись совсем без js :)

Comments

[Murat Atila]

Ну я не говорил совсем без js, я имел ввиду лишь, без использования canvas, рисовать не холсте я пока не умею =/

[Дмитрий]

Murat Atila: ну без canvas такое сделать можно. Причем анимацию рисуя не на js а на css, просто на js вам придется манипулировать классами, так как в css классы добавлять нельзя в определенное время, по событиям :)
здесь работает css transform и css transition для анимации. Вот это дело и надо ковырять как вам вздумается.

[Murat Atila]

Дмитрий Пищалка: Всё таки я сильно сомневаюсь, что повторить один в один возможно =/
codepen.io/theexplay/pen/jEGjpw

[Murat Atila]

Дмитрий Пищалка: Вы случайно не подскажете как, повесить анимацию на закрытие меню?)

Answer 3

[Сергей Мельников]

здесь поищите tympanus.net/codrops/category/tutorials