Защо не се показва string4 и как да бъде оправено? CSS

Ticketa

Registered
https://codepen.io/Ticketa/pen/KKNaqZb

Код:
<meta charset="UTF-8">
<style>.ms-header {
  display: flex;
  align-items: center;
  jsutify-content: center;
  font-family: sans-serif;
}
.ms-header__title {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  /*font-size: 4rem;*/
  font-weight: bold;
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;
  -webkit-mask-image: linear-gradient(transparent, white, white, white, transparent);
          mask-image: linear-gradient(transparent, white, white, white, transparent);
  mask-type: luminance;
  mask-mode: alpha;
}
.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-animation-name: wordSlider;
          animation-name: wordSlider;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}
@-webkit-keyframes wordSlider {
  0%,
  27% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  33%,
  60% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  66%,
  93% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}

@keyframes wordSlider {
  0%,
  27% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  33%,
  60% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  66%,
  93% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}</style><header class="ms-header">
  <h1 class="ms-header__title">
    Text
    <div class="ms-slider">
      <ul class="ms-slider__words">
        <li class="ms-slider__word">string1</li>
        <li class="ms-slider__word">string2</li>
        <li class="ms-slider__word">string3</li>
        <li class="ms-slider__word">string4</li>
        
        <li class="ms-slider__word">string1</li>
      </ul>
    </div>
  </h1>
</header>
 
Поиграй си с keyframes. Имаш 4 реда да покажеш, а в keyframes имаш само 3 стъпки.

Това показва string4, само транзишъна към string1 не е наред. Може да се направи за произволно количество редове с малко математика :)

Код:
@keyframes wordSlider {
  0%,
  15% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  25%,
  40% {
    -webkit-transform: translateY(-20%);
            transform: translateY(-20%);
  }
  45%,
  60% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
  65%,80% {
    transform: translateY(-60%);
  }
  100% {
    -webkit-transform: translateY(-60% -80%);
            transform: translateY(-60% -80%);
  }
}
 

Горе