How to make an animation return smoothly?

June 18, 2022

I made an animation for when I hover over links. The text smoothly moves to the left. However, when I take my cursor off the link the text teleports back to its original place. How can I make it so when I take my cursor off the link the text moves back smoothly?

#connect {
  background-color: #303841;
  margin-top: 0;
  color: white;
  padding-top: 5%;
  text-align: center;
  padding-bottom: 5%;
}
#connect h1 {
  margin-top: 0;
}
a {
  color: white;
  text-decoration: none;
}
#connect a:hover {
  animation-name: link;
  animation-duration: .35s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
@keyframes link {
  from {margin-left: 0%;}
  to {margin-left: 3%;}
}

<div id="connect">
            <h1>Lets Work Together</h1>
            <div id="contact">
                <p><a href="github.com">Github</a></p>
                <p><a href="gmail.com">Email</a></p>
                <p><a href="twitter.com">Twitter</a></p>
            </div>
        </div>

>Solution :

Is there some reason you’re not using a transition? For :hover functionality, I prefer it over animation.

#connect {
  background-color: #303841;
  margin-top: 0;
  color: white;
  padding-top: 5%;
  text-align: center;
  padding-bottom: 5%;
}

#connect h1 {
  margin-top: 0;
}

a {
  color: white;
  text-decoration: none;
}

#connect a {
  transition: 0.35s margin ease-in-out;
}

#connect a:hover {
  margin-left: 3%;
}

<div id="connect">
  <h1>Lets Work Together</h1>
  <div id="contact">
    <p><a href="github.com">Github</a></p>
    <p><a href="gmail.com">Email</a></p>
    <p><a href="twitter.com">Twitter</a></p>
  </div>
</div>