html css3 slider - Как рассчитать процент или время выполнения нового созданного ползунка ключевых кадров в коде?

Question

Мне нужен свет, пожалуйста!

Живой пример: https://codepen.io/cassidoo/pen/MyaWzp

. Есть небольшая часть всего кода.

HTML

`<h1>Pure CSS3 Text Carousel</h1>`

`<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
       <li class="anim1">
          <div class="quote">Hello, this is a quote from a person.</div>
          <div class="source">- Person</div>
        </li>
    <li class="anim2">
      <div class="quote">Hello, this is a quote from another person.</div>
      <div class="source">- Another person</div>
    </li>
    <li class="anim3">
      <div class="quote">Hello, this is a quote from an animal.</div>
      <div class="source">- Animal</div>
    </li>
    <li class="anim4">
      <div class="quote">Hello, this is a quote from a plant.</div>
      <div class="source">- Plant</div>
    </li>
    <li class="anim5">
      <div class="quote">How do ya like that.</div>
      <div class="source">- Cassidy</div>
    </li>
  </ul>
</div>

 **CSS**
 .slider li.anim1 {
   -moz-animation: cycle 60s linear infinite;
   -webkit-animation: cycle 60s linear infinite;
   animation: cycle 60s linear infinite;
  }
*/@-moz-keyframes cycle {
 0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
   top: 0px;
    opacity: 1;
    z-index: 0;
  }
   20% {
     top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
    top: -325px;
    opacity: 0;
    z-index: -1;
  }
   92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
   96% {
    top: -325px;
    opacity: 0;
  }
  100% {
     top: 0px;
    opacity: 1;
  }
}
@-webkit-keyframes cycle {
  0% {
    top: 0px;
  }
  4% {
    top: 0px;
  }
  16% {
     top: 0px;
    opacity: 1;
    z-index: 0;
  }
  20% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  21% {
     top: -325px;
     opacity: 0;
    z-index: -1;
  }
  50% {
    top: -325px;
    opacity: 0;
    z-index: -1;
   }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
   }
  96% {
    top: -325px;
    opacity: 0;
  }
  100% {
     top: 0px;
     opacity: 1;
  }
}

Я пытаюсь создать более 5 ТЕКСТОВЫХ СЛАЙДОВ на основе кода.

Но у меня возникают проблемы, когда я пытаюсь реализовать ШЕСТОЙ 6-й СЛАЙД и т. Д.

Основная проблема здесь, я думаю, это математические вычисления @-WEBKIT-KEYFRAMES и @-MOZ-KEYFRAMES CYCLE . Все слайды работают вместе в последовательности ОДИН ПОСЛЕ ДРУГОГО .

Если я скопирую один из существующих слайдов и попытаюсь создать номер 6, это сгенерирует один duplicated slideshow, и он покажет одну последовательность с дублированием Frases !

Вопрос:

• есть ли КАЛЬКУЛЯТОР ЦИКЛА КЛАВИАТУР или МЕТОД РАСЧЕТА МАТЕМАТИКИ, который я могу использовать, чтобы сделать 10 слайд-шоу или больше?

• есть ли инструмент, который я могу использовать, чтобы помочь мне сделать расчет?

• Что мне нужно сделать, чтобы увеличить количество слайдов, пожалуйста?

• Что я должен реализовать в коде?

Я хочу воспроизвести тот же эффект, что и в примере link выше, но с 10 слайдами или более.

Вот почему мне нужно соблюдать метод расчета.

заранее большое спасибо за помощь.

Answer 1

Я бы предложил добавить общий класс ко всем элементам (.anim1, .anim2 ..., .anim7), которые необходимо анимировать. Я добавил общий класс .anim. Добавьте анимацию в .anim стиле класса и добавьте задержку в .anim1, .anim2, ...., .anim7 стиле класса, увеличивающуюся с общей продолжительностью анимации.

Другими словами, запускать одинаковую анимацию на всех элементах с некоторой задержкой.

Если вы хотите добавить / удалить элементы для анимации, вам просто нужно сделать простую математику для свойства animation-duration. Это будет animation-delay time * total elements.

См. Фрагмент ниже:

html,
body {
  font-family: 'Droid Serif', serif;
}

h1 {
  font-size: 60px;
  text-align: center;
}

.content-slider {
  width: 100%;
  height: 360px;
}

.slider {
  height: 320px;
  width: 680px;
  margin: 40px auto 0;
  overflow: visible;
  position: relative;
}

.mask {
  overflow: hidden;
  height: 320px;
}

.slider ul {
  margin: 0;
  padding: 0;
  position: relative;
}

.slider li {
  width: 680px;
  height: 320px;
  position: absolute;
  top: -325px;
  list-style: none;
}

.slider .quote {
  font-size: 40px;
  font-style: italic;
}

.slider .source {
  font-size: 20px;
  text-align: right;
}

.slider li.anim {
  animation-name: cycle;
  animation-duration: 21s; /*You need to do Math here. (delay time * total elements)*/
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

.anim1{
  animation-delay:0s; 
}

.anim2{
  animation-delay:3s; 
}
.anim3{
  animation-delay:6s; 
} 
.anim4{
  animation-delay:9s; 
}
.anim5{
  animation-delay:12s; 
} 
.anim6{
  animation-delay:15s; 
}
.anim7{
  animation-delay:18s; 
}

.slider:hover li {
  animation-play-state: paused;
}

@keyframes cycle {
  0% {
    top: -325px;
  }
  4% {
    top: 0px;
  }
  16% {
    top: 0px;
    opacity: 1;
    z-index: 0;
  }
  18% {
    top: 325px;
    opacity: 0;
    z-index: 0;
  }
  92% {
    top: -325px;
    opacity: 0;
    z-index: 0;
  }
  100% {
    top: -325px;
    opacity: 0;
  }
}

<h1>Pure CSS3 Text Carousel</h1>

<div class="content-slider">
  <div class="slider">
    <div class="mask">
      <ul>
        <li class="anim anim1">
          <div class="quote">1. Hello, this is a quote from a person.</div>
          <div class="source">1 - Person</div>
        </li>
        <li class="anim anim2">
          <div class="quote">2. Hello, this is a quote from another person.</div>
          <div class="source">2 - Another person</div>
        </li>
        <li class="anim anim3">
          <div class="quote">3. Hello, this is a quote from an animal.</div>
          <div class="source">3 - Animal</div>
        </li>
        <li class="anim anim4">
          <div class="quote">4. Hello, this is a quote from a plant.</div>
          <div class="source">4 - Plant</div>
        </li>
        <li class="anim anim5">
          <div class="quote">5. How do ya like that.</div>
          <div class="source">5 - Cassidy</div>
        </li>
        <li class="anim anim6">
          <div class="quote">6. How do ya like that.</div>
          <div class="source">6 - Cassidy</div>
        </li>
        <li class="anim anim7">
          <div class="quote">7. How do ya like that.</div>
          <div class="source">7 - Cassidy</div>
        </li>
      </ul>
    </div>
  </div>
</div>