Как анимировать данный бургер?

Question

[offsiderst]

https://jsfiddle.net/04nLaz32/
по клику закрытию


обычно 3 линии, тут 4 (на скрине выше 4)

Comments

[Иван В]

по клику две палочки исчезают, а две других складываются в крестик.
https://developer.mozilla.org/ru/docs/Web/CSS/transform

[maxemga]

Тебе что нужно то? Чтобы ты когда нажимал на этот бургер он у тебя пропадал или какая-то определенная анимация врубалась с последующем выключением бургера?

[offsiderst]

maxemga, Иван В, дополнил вопрос

[Иван В]

когда обычные 3 линии, то исчезает одна, а две другие в крестик складываются )
задайте вопрос еще конкретнее, а лучше покажи код, который вы пробовали написать чтобы решить задачу

[offsiderst]

Иван В, так код в вопросе есть

[Иван В]

offsiderst, да, только заметил. Ну в примере все отлично работает. Судя по всему ты просто не знаешь как переделать пример под себя.
Раздели свою задачу на две части:
1) Сделай чтобы было 4 линии
2) Анимируй эти линии.

Подсказываю по первой части - переделай верстку так, чтобы небыло псевдоэлементов (after, before), тогда без труда сможешь добавить еще линию.

Answer 1

[Максим]