Медиа-запрос без сохранения состояния в CSS? ⇐ CSS

[Anonymous]

Я пытаюсь скрыть и показать боковую панель в зависимости от ширины экрана клиента, используя две соответствующие анимации (

Код: Выделить всё

hide-sidebar

и раскрывающаяся боковая панель). Для достижения этой функциональности я использую медиа-запрос:

Код: Выделить всё

@media screen and (max-width: [max-width]) {
#sidebar {
animation-name: hide-sidebar;
}
}

Тогда правила боковой панели выглядят следующим образом:

Код: Выделить всё

#sidebar {
...

animation-fill-mode: forwards;
animation-duration: 0.2s;
animation-iteration-count: 1;

animation-name: reveal-sidebar;
}

Идея, конечно, состоит в том, что медиа-запрос изменяет свойство анимации-name в зависимости от ширины клиента, и соответствующая анимация воспроизводится один раз каждый раз, когда это происходит.
Однако анимация воспроизводится один раз при загрузке страницы, чего мне, конечно, не нужно. На функциональность это особо не влияет, но выглядит странно и непрофессионально.
Насколько мне известно, медиа-запросы в CSS полностью сохраняют состояние, поэтому бесполезно пытаться что-то изменить. Или есть?
Существует ли вообще исправление чистого CSS для моего текущего подхода или мне следует его полностью изменить?
Существует ли чистый CSS исправить вообще? Я стараюсь избегать использования для этого сценариев, если это возможно.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ery-in-css