Animation of Css link

Question

Animation occurs when I pass the mouse, but when I remove it comes back without animation. They can tell me how to have the same animation effect when removing the 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>

Answer 1

Come on, I’ll split the answer into two parts

First:

Transition may receive a property such as parameter, as for example the color property

{
  transition: color .4s;
}

If she does not receive any parameter, she will use all the properties as a parameter

According to:

An element will always receive its class properties, for example

.minha-classe{
  color: red
}

This element will always be red, right ? and now if we add a pseudo class :Hover

.minha-classe:hover{
  color: blue
}

Now when I pass my cursor under the element it will be blue, when removing it will be red again, the same thing applies to the property Transition, the animation will only be activated when you pass the cursor and will never be called when you withdraw it.

Going back to his css, it would have to look like this:

    <!-- 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>