:hover после своей анимации проигрывает другую

Собственно такая проблема: имеется блок-меню, ему присвоена своя анимация ("menuSmall") (с загрузкой сайта меню выезжает из правого края экрана, потом через уезжает обратно, оставляя маленький квадрат для взаимодействия и немного тухнет) и после окончания анимации меню остается на месте. Дальше при наведении (присвоил блоку :hover) запускается вторая анимация ("menuSmallOpacity") меню снова выдвигается, останавливается и становится ярким. Проблема заключается в том, что когда убираешь курсор, то анимация :hover резко прерывается и заново начинается анимация menuSmall. Все анимации через animation и @keyframes, желателен ответ на чистом css, без js.

.menu {
    position: fixed;
    opacity: 1;
    top: 15px;
    left: 1450px;
    width: 1000px;
    height: 60px;
    border: 3px solid white;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9;
    box-shadow: 0px 0px 10px blue;
    animation-name: menuSmall;
    animation-fill-mode: both;
    animation-duration: 3s;
    animation-fill-mode: none;
}

@keyframes menuSmall {
    0% {
        opacity: 0;
        left: 1450px;
    }
    80% {
        opacity: 1;
        left: 550px;
    }
    100% {
        opacity: 0.4;
        left: 1450px;
    }
} 

.menu:hover {
    animation-name: menuSmallOpacity;
    animation-duration: 1s;
    animation-fill-mode: both;
    transition: all 2s;
}

@keyframes menuSmallOpacity {
    0% {
        opacity: 0.4;
        left: 1450px;
    }
    100% {
        opacity: 1;
        left: 550px;
    }
}

HTML в body

<div class="menu">
        <div class="menu1">О нас</div>
        <div class="menu2">Текст 2</div>
        <div class="menu3">Текст 3</div>
</div>