html - CSS: animation is not smooth

Question

I have simple CS3 animation which is flipping three words vertically.

Now my animation is not very smooth like you can see in my code. Is there any option on how to make it more smooth? Mainly the first text element is not showing smooth. I already tried ease-in-out but it's not better. Also tried changing the percentage of animations but that was only worse and worse.

MY HTML AND CSS CODE:

body {
  background: #000;
}

h1 {
  font-weight: 900;
  font-style: italic;
  font-size: 5em;
  text-transform: uppercase;
  text-align: center;
  padding: 40px 0;
  color: rgba(255, 255, 255, 1);

}

#flip {
  height: 80px;
  margin-left: 16px;
  overflow: hidden;
}

#flip .flip-wrapper {
  display: flex;
}

#flip>div>div {
  padding: 4px 12px;
  height: 45px;
  margin-bottom: 45px;
  color: #fff;
  display: inline-block;
}

#flip .flip-container {
  animation: show 5s linear infinite;
}

@keyframes show {
  0% {
    margin-top: -260px;
  }
  5% {
    margin-top: -190px;
  }
  33% {
    margin-top: -190px;
  }
  38% {
    margin-top: -100px;
  }
  66% {
    margin-top: -100px;
  }
  71% {
    margin-top: -10px;
  }
  99.99% {
    margin-top: -10px;
  }
  100% {
    margin-top: -260px;
  }
}

<h1>
  Digital content
  <span>
    that
              <div id=flip>
                <div class="flip-container">
                    <div class="flip-wrapper"><div>works</div></div>
                    <div class="flip-wrapper"><div>earns</div></div>
                    <div class="flip-wrapper"><div>tellth</div></div>
                </div>
              </div>
            </span>
</h1>

Answer 1

Try ease-in-out, the animation will have a slow start and a slow end.

#flip .flip-container {
    animation: show 12s ease-in-out infinite;
}

You can see and try more examples of animation properties on this page https://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp