.parent {
  width: 25px;
  height: 150px;
  background: cornflowerblue;
}

.child {
  background: lemonchiffon;
  animation: slide 1s ease-in-out alternate infinite;
}

@keyframes slide {
  from {
    transform: translateY(0%);
  }

  to {
    /* 100% should work, right?! */
    transform: translateY(100%);
  }
}

/* Not relevant to the example */
html,
body {
  height: 100%;
}
body {
  margin: 0;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
}