将另外两个项目添加到动画滑块中

Question

我正在使用用于3行文本的CSS3文本滑块。我希望再添加两行，但无法弄清楚如何重新计算密钥帧。

我在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>

注意，我更改了您的初始标记，因为我希望它写一个更通用的解决方案，而不是针对您的特定情况量身定制的。
但是，如果您只对5个项目的CSS感兴趣，并且想保留您的标记，这就是您的要求：

.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 }
}