CSS: Getting inidivudal links in navbar to slide to the left on page load

user_1070096 0
Viewed 37

I'm working on a site (http://wpstaging.centerstaging.com/), where I'm trying to get the five links, not the contact button, to both fade in and slide in from the right to the left using pure CSS.

Kind of got the fade in working but initially on page load, the buttons all appear and then the fade effect happens. I don't want that. I want it where the buttons all appear at 100% transparency and then both the slide and fade effects occur.

Should note this is a WordPress site using Elementor.

Code example:

.elementor-nav-menu li.menu-item-101 {
  animation: fadeIn 1s ease-in 1s 1 both;
}

.elementor-nav-menu li.menu-item-100 {
  animation: fadeIn 1s ease-in 1.5s 1;
}

.elementor-nav-menu li.menu-item-99 {
  animation: fadeIn 1s ease-in 2s 1;
}

.elementor-nav-menu li.menu-item-98 {
  animation: fadeIn 1s ease-in 2.5s 1;
}

.elementor-nav-menu li.menu-item-97 {
  animation: fadeIn 1s ease-in 3s 1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
<ul id="menu-1-ae7eb80" class="elementor-nav-menu">
  <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101">
    <a title="" href="#" class="elementor-item">Link One</a>
  </li>
</ul>

css-animations css
1 Answers

Forward

  • Start with 0 opacity on the element
  • Use forward on your animations.
  • You might also want to start the change in opacity only halfway to around the 80ish percentile, to prevent overlapping.
  • You can also use a custom cubic-bezier instead of just using ease-in.

ul {
  list-style: none;
  display: flex;
  gap: 5px;
}

li {
  width: 5rem;
  background-color: #111;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
}

a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: white;
 }

.elementor-nav-menu li.menu-item-101 {
  animation: fadeIn 2s cubic-bezier(.3, -0.01, .49, 1) .01s forwards;
  opacity: 0;
}

.elementor-nav-menu li.menu-item-100 {
  animation: fadeIn 2s cubic-bezier(.3, -0.01, .49, 1) .5s forwards;
  opacity: 0;
}

.elementor-nav-menu li.menu-item-99 {
  animation: fadeIn 2s cubic-bezier(.3, -0.01, .49, 1) 1s forwards;
  opacity: 0;
}

.elementor-nav-menu li.menu-item-98 {
  animation: fadeIn 2s cubic-bezier(.3, -0.01, .49, 1) 1.5s forwards;
  opacity: 0;
}

.elementor-nav-menu li.menu-item-97 {
  animation: fadeIn 2s cubic-bezier(.3, -0.01, .49, 1) 2s forwards;
  opacity: 0;
}

@keyframes fadeIn {
  0% {
opacity: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
  }

  50% {
opacity: 0
transform: translateX(0%);
  }

  100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
  }
}
<ul class="elementor-nav-menu">
  <li class="menu-item-97"><a href="#">Link One</a></li>
  <li class="menu-item-98"><a href="#">Link Two</a></li>
  <li class="menu-item-99"><a href="#">Link Three</a></li>
  <li class="menu-item-100"><a href="#">Link Four</a></li>
  <li class="menu-item-101"><a href="#">Link Five</a></li>
</ul>

You might still want to play with the numbers a little until you get what you desire.

user_123485840
Related