Добавьте еще два элемента в анимированный слайдер

Question

Я использую текстовый слайдер CSS3, который был сделан для 3 строк текста.Я хочу добавить еще две строки, но не могу понять, как пересчитать ключевые кадры.

Я добавил дополнительные элементы в CSS, но не знаю, как пересчитать ключевые кадры.

Любая помощь приветствуется!

HTML:

<p class="item-1">Text Line 1</p>    
<p class="item-2">Text Line 2</p>
<p class="item-3">Text Line 3</p>  
<p class="item-4">Text Line 4</p>
<p class="item-5">Text Line 5</p>

CSS:

.item-1, 
.item-2, 
.item-3,
.item-4,
.item-5 {
    font-family: 'Suez One';
    font-size: 72px;
    line-height: 80px;
    color: white !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
    text-shadow: 8px 8px 3px #000000;
    position: absolute;
    display: block;
    width: 60%;
    z-index: 1001;
    -webkit-animation-duration: 20s;
            animation-duration: 20s;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.item-1{
    -webkit-animation-name: anim-1;
            animation-name: anim-1;
}

.item-2{
    -webkit-animation-name: anim-2;
            animation-name: anim-2;
}

.item-3{
    -webkit-animation-name: anim-3;
            animation-name: anim-3;
}
.item-4{
    -webkit-animation-name: anim-4;
            animation-name: anim-4;
}
.item-5{
    -webkit-animation-name: anim-5;
            animation-name: anim-5;
}

@-webkit-keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
    8.3%, 25% { left: 25%; opacity: 1; }
    33.33%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-1 {
    0%, 8.3% { left: -100%; opacity: 0; }
    8.3%,25% { left: 25%; opacity: 1; }
    33.33%, 100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-2 {
    0%, 33.33% { left: -100%; opacity: 0; }
    41.63%, 58.29% { left: 25%; opacity: 1; }
    66.66%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-2 {
    0%, 33.33% { left: -100%; opacity: 0; }
    41.63%, 58.29% { left: 25%; opacity: 1; }
    66.66%, 100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}
@keyframes anim-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-4 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

@-webkit-keyframes anim-5 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}
@keyframes anim-5 {
    0%, 66.66% { left: -100%; opacity: 0; }
    74.96%, 91.62% { left: 25%; opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

При публикации этого вопроса я получил сообщение об ошибке «Похоже, что ваше сообщение в основном является кодом, пожалуйста, добавьте больше деталей». Вот почему я набираю это.Попытка добавить еще несколько слов, чтобы я мог опубликовать этот вопрос.Спасибо за ваше терпение.

Answer 1

Вот скрипт, который пишет анимацию на лету, основываясь на количестве слайдов:

'use strict';

var slider = document.querySelector('.css-slider'),
    slides = slider.querySelectorAll('p'),
    css = '';

for (var i = 0; i < slides.length; i++) {
  css += '.css-slider>*:nth-child(' + (i + 1) + '){animation-name:a-' + i + '}' + ('@keyframes a-' + i + '{') + ('0%,' + i * 100 / slides.length + '%{transform: translatex(-100%)}') + (i * 100 / slides.length + 25 / slides.length + '%,' + ((i + 1) * 100 / slides.length - 25 / slides.length) + '%{transform: translatex(0)}') + ((i + 1) * 100 / slides.length + '%,100%{transform: translatex(100%)}') + '}';
}
css += '.css-slider>*{animation-duration:' + slides.length * 4 + 's;';

var head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

style.type = 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);

@import url('https://fonts.googleapis.com/css?family=Suez+One');
.css-slider > * {
    font-family: 'Suez One';
    font-size: 72px;
    line-height: 55px;
    color: white;
    text-shadow: 5px 5px 3px rgba(0,0,0,.65);
    position: absolute;
    top: 0;
    width: 100%;
    text-align: center;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-iteration-count: infinite;
}
.css-slider, .css-slider > *:last-child {
  position: relative;
}
.css-slider {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  margin: 0;
  overflow-x: hidden;
}

<div class="css-slider">
  <p>Text Line 1</p>    
  <p>Text Line 2</p>
  <p>Text Line 3</p>  
  <p>Text Line 4</p>
  <p>Text Line 5</p>
  <p>Text Line 6</p>
  <p>Text Line 7</p>
</div>

Примечание. Я изменил вашу начальную разметку, поскольку хотел, чтобы она написала более общее решение, а не то, которое было бы адаптировано для вашего конкретного случая.
Но если вас интересует только CSS для 5 элементов, и вы хотите сохранить свою разметку, вот что вы просите:

.item-1 { -webkit-animation-name: a-0; animation-name: a-0 }
.item-2 { -webkit-animation-name: a-1; animation-name: a-1 }
.item-3 { -webkit-animation-name: a-2; animation-name: a-2 }
.item-4 { -webkit-animation-name: a-3; animation-name: a-3 }
.item-5 { -webkit-animation-name: a-4; animation-name: a-4 }

@-webkit-keyframes a-0 {
  0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
  20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@keyframes a-0 {
  0% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  5%, 15% { -webkit-transform: translatex(0); transform: translatex(0) }
  20%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@-webkit-keyframes a-1 {
  0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
  25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
  40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@keyframes a-1 {
  0%, 20% { -webkit-transform: translatex(-100%); transform: translatex(-100%)}
  25%, 35% { -webkit-transform: translatex(0); transform: translatex(0) }
  40%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@-webkit-keyframes a-2 {
  0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
  60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@keyframes a-2 {
  0%, 40% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  45%, 55% { -webkit-transform: translatex(0); transform: translatex(0) }
  60%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@-webkit-keyframes a-3 {
  0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
  80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@keyframes a-3 {
  0%, 60% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  65%, 75% { -webkit-transform: translatex(0); transform: translatex(0) }
  80%, 100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@-webkit-keyframes a-4 {
  0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
  100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

@keyframes a-4 {
  0%, 80% { -webkit-transform: translatex(-100%); transform: translatex(-100%) }
  85%, 95% { -webkit-transform: translatex(0); transform: translatex(0) }
  100% { -webkit-transform: translatex(100%); transform: translatex(100%) }
}

И принцип, лежащий в основе ключевых кадров:

.item-${n+1} { animation-name: a-${n} }

@keyframes a-${n} {
  0%, enterStart { left state ruleset }
  enterEnd, leaveStart { center state ruleset }
  leaveEnd, 100% { right state ruleset }
}