Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Fazer animação reverter ao perder o foco do hover

a::after {
    content: "";
    background-color: #000;
    width: 0;
    display: block;
    transition: 0.2s;
}

a:hover::after {
    animation: linha-menu 0.2s linear forwards;
    animation-direction:alternate;
}

@keyframes linha-menu{
    0% {
        width: 0;
        height: 2px;
        border-bottom-color: transparent;
    }
    100% {
        width: 100%;
        height: 2px;
        border-bottom-color: #000;
    }
}

Fiz uma animação para aparecer uma linha da esquerda para a direita em baixo do link ao passar o mouse, estou tentando fazer com que a animação reverta quando o usuário tirar o mouse de cima, como faço?

1 resposta
solução!

Fala aí Rodolfo, tudo bem? Bom, apenas com CSS isso é um pouco complicado, pois, existe o :hover e quando você sair do hover será os estilos padrões.

Se você precisar pegar o mouseout sugiro fazer com JavaScript através do mouseout, você pode aplicar uma classe no elemento e depois de um tempo (assim que a animação terminar) tirá-la com setTimeout.

Espero ter ajudado.