slider.html

<div class="slider">
  <div class="item n1">1</div>
  <div class="item n2">2</div>
  <div class="item n3">3</div>
</div>

slider.scss

.slider {
  width: 100%;

  display: flex;
  justify-content: center;

  height: 30px;
  overflow: hidden;
  position: relative;

  .item {
    line-height: 30px;

    --dur: 6s;
    // если 3 слайда то на 3 делим
    --delay:  calc(var(--dur) / 3);

    opacity: 0;
    transition: opacity 300ms;
    transform: translateY(100%);
    position: absolute;

    animation-name: sliding;
    animation-duration: var(--dur);
    animation-iteration-count: infinite;

    &.n1 {
      animation-delay: 0s;
    }
    &.n2 {
      animation-delay: calc(var(--delay) * 1);
    }
    &.n3 {
      animation-delay: calc(var(--delay) * 2);
    }

    @keyframes sliding {
      // 3 слайда значит 100 / 3
      // 0-33.33 - движение 1 слайда
      // 16.66% (из 33.33) - середина (где слайд будет показан по середине) 
      // 33.33-100 - 2 части ожидания других двух слайдов
      0% {
        opacity: 0;
        transform: translateY(100%);
      }

      9% {
        transform: translateY(0);
      }
      21% {
        opacity: 1;
      }     
      23% {
        transform: translateY(0);
      }

      33.33% {
        opacity: 0;
        transform: translateY(-100%);
      }

      33.34%, 100% {
        transform: translateY(100%);
      }
    }
  }

}