How to make an animation return smoothly?

Question

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>

https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover Honestly, for something this simple I would use a transition instead of an animation, but if you want to know how to do it there's several answers in that thread that cover it. — AStombaugh, Jun 18 '22 at 18:28
I think this is helpful for you : https://pragmaticpineapple.com/smoothly-reverting-css-animations/ — Dhinesh, Jun 18 '22 at 18:48
I'm still learning so I didn't know about transitions. I'll look into it more thx! — user19260499, Jun 18 '22 at 18:58

score 1 · Accepted Answer · answered Jun 18 '22 at 18:30

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>

exactly ... if you want to make transitions for tag, add it for tag, not for pseudo-classes like :hover — Wordica, Jun 18 '22 at 18:49

How to make an animation return smoothly?

1 Answers1