Почему не работает код анимации кнопки?

Question

[dhat]

Понравилась кнопка вызова меню на сайте https://www.aviasales.ru/ (вверху справа).
Захотелось понять как оно устроено. Скопировал код из DevTools, но он почему-то не работает. Почему? Там еще JS нужен? Как повторить такую кнопку?

codepen.io/dhatt/pen/BLaYJV?editors=1100

Answer 1

[Aleksandr]

Пример
пример
пример
еще
и еще
и еще

Comments

[dhat]

Я правильно понял - мне не хватает в CSS :after и :before, а также JS, меняющий классы при клике?

[dhat]

ОХ, СПАСИБО ВАМ ЗА ПРИМЕРЫ))

[Aleksandr]

dhat: Пожалуйста

Answer 2

[GreatRash]

Потому что вы не написали анимаций.

Comments

[dhat]

Вроде же есть для hamburger__line. Тут JS нужен? Или что вы имеете ввиду?

[dhat]

Я правильно понял - мне не хватает в CSS :after и :before, а также JS, меняющий классы при клике?

[GreatRash]

dhat: У вас нет правила @keyframes

[dhat]

GreatRash: но ведь его нет и в оригинале кода из DevTools, и в примерах выше выложенных в комментах тоже нету нигде @keyframes...Или я что-то не правильно понимаю? Признаюсь, до анимации еще толком руки не доходили, поэтому наверное ерунду спрашиваю. Обязательно вскоре надо садится ее изучать))

[GreatRash]

dhat: Всё там есть (CTRL+F ввести keyframes hamburger). Учитесь пользоваться дев-тулзами браузера.