CSS before/after с переходами (transitions)

У меня есть иконка-гамбургер, в которой тело блока, содержащего её это средняя линия иконки, а before с after — верхние и нижние линии соответственно. Мне нужно при нажатии на иконку (добавляется специальный класс к кнопке) изменить стили для каждой полосы. Например, среднюю скрыть, а крайние перевернуть, чтобы они образовали крестик. Сначала нужно разобраться с плавным скрытием средней полоски.

Для этого я сделал что-то такое:

        #hamburger { opacity: 0; }
        #hamburger::before { 
            opacity: 1;
        }
        #hamburger::after { 
            opacity: 1;
        }

Как вы понимаете, явное переопределение прозрачности для псевдоэлементов нужно, чтобы они не скрывались вместе со всем элементом. Но это не помогло. Весь гамбургер загадочно исчезает при клике.

В каком-то ресурсе написано, что есть старое свойство visibility, которое во всём идентично opacity, только поддерживает только hidden/visible. Как ни странно, оно работает лучше, и если явно задать видимость для псевдоэлементов, то они останутся видимыми. Но всё равно это свойство не подходит, т.к. мне нужен плавный переход.

Какие есть альтернативы в рамках использования псевдоэлементов и использования transition?