Как создать красивый эффект при переходе «пирожка» в close?

Question

[gcj]

Приветствую, друзья.
Вопрос: как создаются вот такие (https://codyhouse.co/demo/rounded-animated-navigat... - нажимаем на меню) красивые эффекты перехода "трех полос" в "крест". Куда копать? Где почитать?

Буду рад любым наводкам. Спасибо!

Comments

[Roman]

gcj а почему бы не скачать исходники?

[gcj]

Roman: а, как собственно, посмотреть какой js сценарий срабатывает при нажатии и украсть его?

[Roman]

gcj сама ссылка из вопроса ведет на скачивание этой конструкции, переход "трех полос" в "крест" как правильно заметили на css, а не js

Answer 1

[Денис Инешин]

Просто хорошая, сделанная вручную, анимация. Всё работает на CSS3.
Вам помогут такие инструменты как: transform-origin, transform rotate, transform translate, transform skew, transition, animation, keyframes.

Ну а чтобы выглядело натурально, просто вдохновитесь этим:
12 приемов художников Disney для оживления анимации
Принципы анимации для веба
Даем анимации жизнь

Answer 2

[Mikhail Osher]

База:
Три слоя гамбургера рисуются отдельно.
При активации средний прячем, а верхний и нижний поворачиваем на 45 градусов.