Как сделать так чтобы с помощью @keyframes анимация проигрывалась один раз?

Question

[torbach]

Здравствуйте, многоуважаемые! Подскажите, пожалуйста, как сделать так чтобы, после проигрывания второй анимации, первая анимация не проигрывалась. Первая анимация при загрузке страницы, а вторая проигрывается при наведении. После того как наводится курсор анимация проигрывается, но стоит увести курсор проигрывается первая анимация появления.

<h1>
...
   <span class="title-first__secondary">незабываемое приключение ждёт вас</span>
</h1>

.title-first__secondary{
    display: block;
    font-weight: 100;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 5px;
    animation-name: poyavl2;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 1;
    backface-visibility: hidden;
    margin-bottom: 65px;
}
@keyframes poyavl2{
    0%{
        opacity: 0;
        transform:translateX(70px);
    }

    25%{
        opacity:0;
    }

    80%{
        transform:translateX(-20px);
    }

    100%{
        opacity: 1;
        transform:translateX(0px);
    }
}



.title-first__secondary:hover{
    animation-name: Kach;
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

@keyframes Kach {
    0%{
        transform:translateX(0px);
    }
    20%{
        transform:translateX(10px);
    }
    40%{
        transform:translateX(-10px);
    }
    60%{
        transform:translateX(20px);
    }
    80%{
        transform: translateX(-20px);
    }
    100%{
        transform:translateX(0px);
    }
}

Answer 1

[fuzzbunch]

Добрый день, без использования JS этого добиться не получится, так как после увода курсора с элемента, псевдокласс :hover сбрасывается, и ему снова присваивается класс .title-first__secondary, в котором заложена первоначальная анимация