Why is "keyframes method" not working the way it should in my css?

Question

In the keyframes part, my PC doesn't recognize the from part. If it would, it would be blue and the opacity command would be grey. But as you see none of them is correct and I don't know why. Because of this little error, my HTML website is not working the way it should. Can anyone please help me? I would like to finish my HTML website.

body {
  margin: 0;
  padding: 0;
  animation: bgcolor infinite 20s;
}

h1 {
  font-family: 'Yeseva One', cursive;
  font-size: 4em;
  margin: 0;
  color: #fff;
}

@keyframes bgcolor {
  0% {
    background: #f1c40f;
  }
  10% {
    background: #f39c12;
  }
  20% {
    background: #e67e22;
  }
  30% {
    background: #d35400;
  }
  40% {
    background: #e74c3c;
  }
  50% {
    background: #c0392b;
  }
  60% {
    background: #e74c3c;
  }
  70% {
    background: #d35400;
  }
  80% {
    background: #e67e22;
  }
  90% {
    background: #f39c12;
  }
  100% {
    background: #f1c40f;
  }
}

h2 {
  font-family: 'IM Fell DW Pica', serif;
  font-size: 3em;
  margin: 0;
  color: #fff;
}

p {
  font-family: 'Clicker Script', cursive;
  font-size: 2em;
  margin: 0;
  color: #fff;
}

button {
  font-family: 'Playfair Display SC', serif;
  font-size: 1em;
}

button {
  margin: 0;
  border: none;
  background: #ea1538;
  padding: 12px 30px;
  border-radius: 30px;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
  transition: .3s
}

button:hover {
  transform: scale(1.3);
  cursor: pointer;
}

.hero {
  height: 100vh;
  width: 100%;
}

nav {
  display: flex;
  align-items: center;
  min-height: 8vh;
  justify-content: space-between;
  padding-left: 25%;
  padding-right: 10%;
}

.logo {
  color: white;
  font-size: 28px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
}

.nav-links a {
  text-decoration: none;
  letter-spacing: 1px;
}

.line {
  width: 100%;
  height: 3px;
  background-color: white;
  margin: 5px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
}

span {
  color: #000000;
}

nav ul li {
  list-style-type: none;
  display: inline-block;
  padding: 10px 20px;
  font-size: 19px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  color: #000000;
  transition: .2s;
}

@media screen and (max-width:1024px) {
  .nav-links {
    display: flex;
    justify-content: space-between;
    width: 60%;
  }
}

@media screen and (max-width:768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    background-color: #ffeaa7;
    /*just to see if the slider works*/
    right: 0px;
    height: 100vh;
    top: 18vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    padding-left: 100%;
    display: block;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

Answer 1

I'm not sure I fully understand your question, it might be helpful to reframe it, with a minimal reproducible example. See StackOverflows MRE

I don't see you calling the animation anywhere in your code. You need to target the nav links, and tell it to use the animation navLinkFade.

Here is an example of a super simple animation.

ul {
  animation: fade 3s forwards;
}


@keyframes fade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

<ul>
  <li>Test</li>
  <li>Test</li>
</ul>