Simultaneous animations in CSS

The two animations occur at the same time. The problem is that, although both have the same run time of 1 second, one has to travel much more space than the other, then they will be seen at different speeds.

For example, the animation slide-in places the item off the screen on the right giving it a% co_of% of 80%, and moves it until it has a% co_of% of 0. That means it has to go through the equivalent to 80% of the screen width in 1 second, and it will be visible very soon (because it is just outside the visible area).

Meanwhile, the animation margin-left places the item off the screen at the top giving it a margin-left of -800%, and moves it until it has a% co_of% of 0. That means it has to go through the equivalent of 800% of the screen width (vertically) in one second, and it will be visible much later than the animation element item-fall (because it is too far from the visible area).

In short: your two animations run correctly at the same time (if you notice they end at the same time) but, due to the difference in space they have to travel and when they enter the visible area of the screen, it seems that one ( margin-top ) is executed before the other ( margin-top ). Although that is not the case.

To make it look like they are running at the same time, you should play a bit with the values of the time (but then one would end before the other, although you could use delays to prevent it) or with the values of the positioning (which can be something simpler).

Here I have made a change in which both are seen at the same time, the idea has been to reduce the size of the distance to be covered for the animation slide-in from -800% to -8%:

.item-lista {
  position: absolute;
  text-align: center;
  top: 12px;
  font-size: 20px;
  list-style: none;
  animation-duration: 1s;
  animation-name: item-fall;
}

@keyframes item-fall {
  from {
    margin-top: -8%;
  }
  to {
    margin-top: 0%;
  }
}

.link {
  text-decoration: none;
  color: black;
}

.link-p {
  text-decoration: none;
  color: rgba(240, 129, 56, 1);
}

.link:hover {
  text-shadow: 1.5px 1.5px rgba(240, 129, 56, 0.8);
}

#item-3 {
  position: absolute;
  right: 10px;
}

#item-2 {
  position: absolute;
  right: 100px;
}

#item-1 {
  position: absolute;
  right: 170px;
}

#a-logo {
  text-decoration: none;
  color: inherit;
}

#logo {
  position: absolute;
  top: 4px;
  left: 12px;
  color: rgba(240, 129, 56, 1);
  ;
  font-size: 35px;
  font-family: fantasy;
  cursor: pointer;
  animation-duration: 1s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 80%;
    width: 280%
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

#logo::after {
  content: " Probando animaciones";
  font-size: 0px;
  -webkit-transition: all .1s ease-in-out;
  -moz-transition: all .1s ease-in-out;
  -o-transition: all .1s ease-in-out;
  transition: all .1s ease-in-out;
}

#logo:hover::after {
  font-size: 28px;
}

<nav>
  <div id="logo"><a href="#1" id="a-logo"><strong>FM</strong></a></div>
  <div id="logo-close"></div>
  <ul>
    <li class="item-lista" id="item-1"><a href="#1" class="link-p">Inicio</a></li>
    <li class="item-lista" id="item-2"><a href="#2" class="link">About</a></li>
    <li class="item-lista" id="item-3"><a href="#3" class="link">Contacto</a></li>
  </ul>
</nav>