How to make CSS animations return to the original position smoothly

user_16760447 0
Viewed 260

I'm making my very first website and I'm trying to add some animations to my navbar links so their size and color change when I hover over them. The problem is that the animation works well but once I remove the curser, the elements return to their original styles instantly without being animated. I have searched for a solution but couldn't find anything that could actually fix this problem.

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
}
.nav_links a:hover {
  animation: nav_elements_animation 0.5s;
  animation-fill-mode: forwards;
}
@keyframes nav_elements_animation {
  100% {
    color: #0d0220;
    text-decoration: underline;
    letter-spacing: 3px;
    font-size: 1.3em;
  }
}
 <nav>
        <div class="logo">
            <h4><a href="Index.html"><img src="Images/AbdoDevs.png" alt="AbdoDevs"></a></h4>
        </div>
        <ul class="nav_links">
            <li><a href="Index.html">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Our_Projects">Our Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>

css-animations css html
3 Answers

You can achieve it like this.

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all .5s
}
.nav_links a:hover {
    color: #0d0220;
    text-decoration: underline;
    letter-spacing: 3px;
    font-size: 1.3em;
}
}
 <nav>
        <div class="logo">
            <h4><a href="Index.html"><img src="Images/AbdoDevs.png" alt="AbdoDevs"></a></h4>
        </div>
        <ul class="nav_links">
            <li><a href="Index.html">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Our_Projects">Our Projects</a></li>
            <li><a href="#Contact">Contact</a></li>
        </ul>
    </nav>

Happy coding!

user_136926580

@keyframes animations are not necessary for this. We just need to change the font-size and add the transition CSS property to the element to give the smoothness for the changes when hover. The more ms you give the transition, the smoother it becomes.

Try the following snippet

.nav_links a {
  color: #342056;
  text-decoration: none;
  letter-spacing: 2px;
  transition: 400ms;
}
.nav_links a:hover {
  font-size:1.5em;
}
<nav>
  <ul class="nav_links">
      <li><a href="Index.html">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Our_Projects">Our Projects</a></li>
      <li><a href="#Contact">Contact</a></li>
  </ul>
</nav>

user_148959850

Using the transition command you can make the animation smooth

I would suggest this css code to be what you can use:

.nav_links a {
  color: #342056;
  font-family: "Open Sans", sans-serif;
  font-size: 1.2em;
  text-decoration: none;
  letter-spacing: 2px;
  transition: all 0.5s
}
.nav_links a:hover {
  animation: nav_elements_animation 0.5s;
  animation-fill-mode: forwards;
}
@keyframes nav_elements_animation {
  100% {
    color: #0d0220;
    text-decoration: underline;
    letter-spacing: 3px;
    font-size: 1.3em;
  }
}

And the html code should remain same

user_161068630
Related