How can I make my keyframe animation start over smoothly?

Question

My animation made with keyframes does not have a smooth end and jumps to the start very fast. I have no idea how to make this transition smoother.

When the animation ends and jumps back to the start the first item is not completely visible.

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  margin-top: -20px;
  overflow: hidden;
}

#flip .content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  text-align: right;
  display: inline-block;
  padding: 5px;
  margin-bottom: 10px;
  animation: flip 4s infinite;
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}

@-webkit-keyframes flip {
  0% {
      transform: translateY(0px);
  }
  20% {
      transform: translateY(-43px);
  }
  40% {
      transform: translateY(-90px);
  }
  60% {
      transform: translateY(-135px);
  }
  80% {
      transform: translateY(-180px);
  }
  100% {
      transform: translateY(0px);
  }
}

<ul>
  <li id="flip">
   <div class="content">
	<h3 class="one">developer</h3>
	<h3 class="two">designer</h3>
	<h3 class="three">programmer</h3>
	<h3 class="four">carodej</h3>
	<h3 class="five">alluneed</h3>
   </div>
  </li>
</ul>

Animation on end can be make animation which makes smooth jump from end to start.

Answer 1

To fix the problem with the half-visible first item after the animation scrolls to the top, you should apply the same height to all items and properly vertically center the h3-tag. To make that easier, I've adjusted your html a little.

To smoothen the animation, you need to change your keyframes. First use a multiple of the height of your elements for the translateY. Then you have to change the percentages. By letting the transition start at 10% of the animation duration, your first item will be visible for a longer time after the animation restarts.

body {
  font-family: 'Poppins', sans-serif;
}

ul {
  list-style: none;
}

#flip {
  height: 43px;
  overflow: hidden;
}

#flip .content {
  height: 43px; /* new */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* new */
}

#flip h3 {
  font-weight: 400;
  font-size: 0.5em;
  color: white;
  text-transform: uppercase;
  padding: 5px;
  animation: flip 6s infinite; /* changed */
  animation-delay: 1s;
}

#flip .one {
  background: #CD1517;
}

#flip .two {
  background: #068587;
}

#flip .three {
  background: #F2B134;
}

#flip .four {
  background: #6B50BF;
}

#flip .five {
  background: #4FB99F;
}


/* changed */
@-webkit-keyframes flip {
  10%, 100% {
    transform: translateY(0px);
  }
  25% {
    transform: translateY(-43px);
  }
  40% {
    transform: translateY(-86px);
  }
  55% {
    transform: translateY(-129px);
  }
  75% {
    transform: translateY(-172px);
  }
}

<ul id="flip">
  <li class="content">
    <h3 class="one">developer</h3>
  </li>
  <li class="content">
    <h3 class="two">designer</h3>
  </li>
  <li class="content">
    <h3 class="three">programmer</h3>
  </li>
  <li class="content">
    <h3 class="four">carodej</h3>
  </li>
  <li class="content">
    <h3 class="five">alluneed</h3>
  </li>
</ul>

Edit: Animation without scroll to top effect

In order to have a seamless rotation effect, you need to adjust the translateY values a bit further and add some more keyframes.

note: The provided code is not perfectly smooth - try to adjust the percentages and translateY values until the animation suites your needs.

@-webkit-keyframes flip {
  0% {
    transform: translateY(15px);
  }
  10% {
    transform: translateY(0px);
  }
  30% {
    transform: translateY(-43px);
  }
  50% {
    transform: translateY(-86px);
  }
  70% {
    transform: translateY(-129px);
  }
  90% {
    transform: translateY(-172px);
  }
  100% {
    transform: translateY(-202px);
  }
}