Почему не работает анимация css (без JS)?

Question

Последний элемент движется непропорционально быстрее, чем другие элементы. Я не знаю, как сделать так, чтобы @keyframes длились 25%. Я хочу проверить результат и использовать его для создания текстового ползунка.

https://codepen.io/fredunit/pen/MWKyBrL?editors=1100

.slide1 {animation: slide1 16s infinite;}
.slide2 {animation: slide2 16s infinite;}
.slide3 {animation: slide3 16s infinite;}
.slide4 {animation: slide4 16s infinite;}


@keyframes slide1 {
  0% {opacity: 1;}
  5% {opacity: 0.5;}
  10% {opacity: 0.1;}
  15% {opacity: 0;}
  50%{opacity: 0;}
  66.6% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide2 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 1;}
  45%{opacity: 0;}
  66.6% {opacity: 0;}
  75%{opacity: 0;}
  100% {opacity: 0;}
}

@keyframes slide3 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 0;}
  45%{opacity: 0;}
  50% {opacity: 1;}
  70%{opacity: 0;}
  100% {opacity: 0;}
}
@keyframes slide4 {
  0% {opacity: 0;}
  10% {opacity: 0;}
  25% {opacity: 0;}
  45%{opacity: 0;}
  50% {opacity: 0;}
  75%{opacity: 1;}
  80%{opacity: 1;}
  90% {opacity: 1;}
  100% {opacity: 0;}
}

<section id="projects">
          <div class="showcase">
           <div class="wrapper">
          <div class="slide1">Tribute Page</div>
          <div class="slide2">Survey Form</div>
            <div class="slide3">Technical  Documentation Page</div>
          <div class="slide4">Landing Page</div>
            </div>
              </div>

Answer 1

У вас 4 текста, поэтому каждый должен быть виден 25% времени. Совместите это с animation-delay, и я думаю, вы получите желаемый результат. Я также добавил opacity, чтобы скрыть текст перед запуском анимации.

.slide1 {animation: slide 16s infinite; animation-delay: 0s; opacity: 0;}
.slide2 {animation: slide 16s infinite; animation-delay: 4s; opacity: 0;}
.slide3 {animation: slide 16s infinite; animation-delay: 8s; opacity: 0;}
.slide4 {animation: slide 16s infinite; animation-delay: 12s; opacity: 0;}

@keyframes slide {
0% {opacity: 0;}
12.5% {opacity: 100;}
25% {opacity: 0;}
100% {opacity: 0;}
}

<section id="projects">
<div class="showcase">
    <div class="wrapper">
        <div class="slide1">Tribute Page</div>
        <div class="slide2">Survey Form</div>
        <div class="slide3">Technical  Documentation Page</div>
        <div class="slide4">Landing Page</div>
    </div>
</div>

Answer 2

Вы можете упростить @keyframes директивы до:

@keyframes slide1 {
  25%, 90% {opacity: 0;}
  0%, 15% {opacity: 1;}
}

@keyframes slide2 {
  0%, 15%, 50%, 100% {opacity: 0;}
  25%, 40% {opacity: 1;}
}

@keyframes slide3 {
  0%, 40%, 75%, 100% {opacity: 0;}
  50%, 65% {opacity: 1;}
}

@keyframes slide4 {
  0%, 65%, 100% {opacity: 0;}
  75%, 90% {opacity: 1;}
}

Я немного ускорил анимацию, но вот рабочий пример:

.slide1 {animation: slide1 8s infinite;}
.slide2 {animation: slide2 8s infinite;}
.slide3 {animation: slide3 8s infinite;}
.slide4 {animation: slide4 8s infinite;}

@keyframes slide1 {
  25%, 90% {opacity: 0;}
  0%, 15% {opacity: 1;}
}

@keyframes slide2 {
  0%, 15%, 50%, 100% {opacity: 0;}
  25%, 40% {opacity: 1;}
}

@keyframes slide3 {
  0%, 40%, 75%, 100% {opacity: 0;}
  50%, 65% {opacity: 1;}
}

@keyframes slide4 {
  0%, 65%, 100% {opacity: 0;}
  75%, 90% {opacity: 1;}
}

<section id="projects">
  <div class="showcase">
    <div class="wrapper">
      <div class="slide1">Tribute Page</div>
      <div class="slide2">Survey Form</div>
      <div class="slide3">Technical  Documentation Page</div>
      <div class="slide4">Landing Page</div>
    </div>
  </div>
</section>