Навигационная панель возвращается после перезагрузки сайта

Question

Я сделал навигационную панель с некоторой анимацией, и она возвращается каждый раз, когда я перезагружаю веб-сайт. Он должен двигаться назад, только если его полностью открыта для ширины: 275 и только тогда, когда я выпускаю свою мышь из нее (напротив парении)

CSS:

#navigation {width: 5px; height: calc(100vh - 50px); opacity: 0; text-align: center; padding-top: 10px; padding-bottom: 10px; animation: pulse-out 0.5s;} 
#navigation .hidden > h3 {color: #FFFFFF; text-transform: uppercase;} 
#navigation .hidden a {color: #FFFFFF; text-decoration: none; display: block; padding-top: 2px; padding-bottom: 2px; text-transform: uppercase; font-size: 14px;} 
#navigation .hidden a:hover {color: #8e44ad;} 
#navigation:hover {width: 275px; background: #171C21; animation: pulse-in 0.5s; opacity: 1;} 
@keyframes pulse-in { 
    0% { 
     width: 5px; 
     opacity: 0; 
    } 

    100% { 
     width: 275px; 
     opacity: 1; 
    } 
} 

@keyframes pulse-out { 
    0% { 
     width: 275px; 
     opacity: 1; 
    } 

    100% { 
     width: 5px; 
     opacity: 0; 
    } 
} 

Как я могу это исправить? Предварительный просмотр в прямом эфире: http://awesomeness.adam.zur.io/ Также текст не должен исчезать таким образом, он должен сначала исчезнуть, а затем медленно изменить его ширину обратно на 5 пикселей.

Answer 1

Вы кладете

#navigation { 
width: 5px; 
height: calc(100vh - 50px); 
opacity: 0; 
text-align: center; 
padding-top: 10px; 
padding-bottom: 10px; 
animation: pulse-out 0.5s;} 

и анимация начинается, когда вы обновите страницу. Вот почему вы видите, как закрывается меню (вызывают импульс работы). Удалите этот стиль, и все будет хорошо освежено. Лучше использовать JS hover вместо этого (при наведении на анимацию пуска анимации и запуска анимации при выводе мыши из меню)