1

Ocorre a animação quando passo o mouse, mas quando removo ele volta sem animação. Sabem me informar como ter o mesmo efeito de animação ao remover o mouse?

.link {
  text-decoration: none;
  font-family: ubuntu, Arial, Helvetica, sans-serif;
  color: cornflowerblue;
  border-left: 4px;
}

.link:hover {
  padding-left: 30px;
  border-left: 4px solid blueviolet;
  color: blueviolet;
  transition: .4s;
}
<!-- LINK ANIMADO -->
<a href="#" class="link">Saiba mais ></a>

1 Resposta 1

2

Vamos lá, vou dividir a resposta em duas partes

Primeiro:

A transition pode receber uma propriedade como parametro, como por exemplo a propriedade color

{
  transition: color .4s;
}

Se ela não receber nenhum parametro, ela usara todas as propriedades como parametro

Segundo:

Um elemento vai sempre receber as propriedades da sua classe, como por exemplo

.minha-classe{
  color: red
}

Esse elemento sempre vai ser vermelho, certo ? e agora se adicionarmos uma pseudo classe :hover

.minha-classe:hover{
  color: blue
}

Agora quando eu passar o meu cursor sob o elemento ele vai ser azul, ao retirar ele voltara a ser vermelho, a mesma coisa se aplica a propriedade transition, a animação só ira ser ativada quando você passar o cursor e nunca será chamada ao se retirar ele.

Voltando para o seu css, ele teria que ficar assim:

    <!-- CSS -->
<style>

    .link{
        text-decoration: none;
        font-family: ubuntu, Arial, Helvetica, sans-serif;
        color: cornflowerblue;
        border-left: 4px;
        transition: .4s;
    }
    .link:hover{
        padding-left: 30px;
        border-left: 4px solid blueviolet;
        color: blueviolet;
    }

</style>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .