Переход CSS на боковой панели не применяется

Пытаюсь добавить переход, но не получается.

Я добавил переход к своим ссылкам и ожидаю изменений при наведении курсора. Я много использовал переход, но иногда это случается со мной, и я не знаю, почему это свойство не работает.

Это мой код:

<div id = "sidebar">
    <ul class = "nav-main-ul">
        <li class = "nav-item"><a href = "#"><i class = "fa fa-home" style = "padding-right: 13px"></i>Home</a></li>
        <li class = "nav-title">Airports</li>
        <li class = "nav-item">
            <a href = "javascript:void(0)"><i class = "far fa-paper-plane" style = "padding-right: 13px"></i>North Airports</a>
            <ul class = "nav-dropdown">
                <li><a href = "">LLBG | Tel-Aviv</a></li>
                <li><a href = "">LLSD | Sde Dov</a></li>
                <li><a href = "">LLHZ | Herzliya</a></li>
                <li><a href = "">LLHA | Haifa</a></li>
                <li><a href = "">LLIB | Rosh Pina</a></li>
            </ul>
        </li>
        <li class = "nav-item">
            <a href = "#"><i class = "far fa-paper-plane" style = "padding-right: 13px"></i>South Airports</a>
            <ul class = "nav-dropdown">
                <li><a href = "">LLOV | Ovda</a></li>
                <li><a href = "">LLET | Eilat</a></li>
            </ul>
        </li>
        <li class = "nav-title">Airstrips</li>
        <li class = "nav-item">
            <a href = "#"><i class = "far fa-paper-plane" style = "padding-right: 13px"></i>North Airstrips</a>
            <ul class = "nav-dropdown">
                <li><a href = "">LLKS | Kiryat Shmona</a></li>
                <li><a href = "">LLBO | Habonim</a></li>
                <li><a href = "">LLMG | Megido</a></li>
            </ul>                
        </li>
        <li class = "nav-item">
            <a href = "#"><i class = "far fa-paper-plane" style = "padding-right: 13px"></i>South Airstrips</a>
            <ul class = "nav-dropdown">
                <li><a href = "">LLBS | Beer Sheva</a></li>
                <li><a href = "">LLMZ | Masada</a></li>
                <li><a href = "">LLEY | Ein Yahav</a></li>
                <li><a href = "">LLYO | Yotvata</a></li>
            </ul>
        </li>
        <li class = "nav-title">Miscellaneous</li>
        <li class = "nav-item"><a href = "#"><i class = "fa fa-headphones-alt" style = "padding-right: 13px"></i>ATC Tools</a></li>
    </ul>
</div>

CSS:

#sidebar {
    position: fixed;
    width: 200px;
    height: 100%;
    background-color: #151719;
    margin-top: 13px;
    list-style-type: none;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
}

#sidebar.active {
    left: -200px;
    -webkit-transition: all 500ms linear;
    -moz-transition: all 500ms linear;
    -o-transition: all 500ms linear;
    transition: all 500ms linear;
}

JS:

function toggleSidebar() {
  document.getElementById("sidebar").classList.toggle('active');
}

переход не работает, я использовал Firefox, и я тоже пробую google chrome, это заставляет его прыгать до -200 пикселей.