Как остановить анимацию?

Question

[deadshumz]

.vk {
    height:30px;
    overflow: hidden;
    display:inline-block;
}
.vk .vklink{
    color:white;
    font-family: 'Roboto', sans-serif;
    font-size:18px;
    display:inline-block;
    transition: all 0.3s;
    width:0;
}
.vk .vkimg {
    display:inline-block;
    transition: all 0.2s;
}
.vk:hover .vklink {
    width:0;
    animation: typing 2s ease-in-out 0s 1 normal forwards;
}   
@keyframes typing {
    0% {width: 0;}
    100% {width: 100%;}
}

Когда анимация заканчивается всё возвращается на 0%, animation-fill-mode: forwards; не помогает!

Comments

[Ilya Olovyannikov]

Приложите, пожалуйста, код в песочнице
Тут
или
Тут

[Виталий Першин]

Конечно она возвращается, она же на hover срабатывает, без hover её нет.. Нужно через js класс с анимацией вешать, если хотите сохранить конечное состояние.