У меня проблемы с этой CSS-анимацией для моей боковой панели. ⇐ CSS

[Anonymous]

Я создал веб-страницу с боковой панелью, на которой есть ссылки на другие части моего сайта. Боковая панель скрыта (на самом деле не скрыта, просто за пределами страницы с помощью left: -16vw), но на ней есть кнопка, которая выделяется для просмотра посетителем. Мне бы хотелось, чтобы когда посетитель нажимал на кнопку, боковая панель выдвигалась. Вот как выглядит мой код:
HMTL:

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

>>

[list]
[*][url=#]Stuff[/url]
[*][url=#]More Stuff[/url]
[*][url=#]Even More Stuff[/url]
[/list]

CSS:

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

#sideBar {
display: flex;
flex-direction: row-reverse;
position: fixed;
height: 84vh;
min-width: 18vw;
top: 8vh;
left: -16vw;
animation: slide;
animation-duration: .3s;
animation-timing-function: ease-in;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-play-state: paused;
}

@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(16vw);
}
}

nav {
background-color: gray;
width: 100%;
height: 100%;
}

#navButton {
min-width:2vw;
margin-left: -1px;
background-color: rgb(228, 228, 228);
border: 2px solid rgb(51, 51, 51);
border-radius: 0 50px 50px 0;
font-size: 1.5rem;
font-weight: bold;
opacity: .5;
transition:
opacity .3s,
background-color 0s;
}

#navButton:active {
background-color: white;
}

#navButton:active + #sideBar {
animation-play-state: running;
}

#navButton:hover {
opacity: 1;
cursor: pointer;
}

Я где-то читал в Интернете, что для работы может потребоваться JavaScript. Могу ли я сделать это только с помощью CSS и HTML? Я еще не изучал JavaScript и просто пытаюсь придерживаться только HTML/CSS. Я пытаюсь узнать как можно больше с этими двумя, прежде чем двигаться дальше. Ребята, заранее спасибо за вашу помощь, я очень ценю это. Также, если у вас есть какие-либо советы по улучшению моего кода, дайте мне знать; Я хочу узнать как можно больше.
Анимация работает, когда я комментирую «состояние воспроизведения анимации», поэтому я знаю, что она работает. Я также пробовал просто добавить только «активный» псевдокласс, но это не сработало. Я также попробовал добавить его при наведении, но это тоже не сработало.

Подробнее здесь: https://stackoverflow.com/questions/791 ... my-sidebar