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>
CodePudding user response:
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>