需要帮助重新利用 CSS 滑动文本动画

Need help repurposing a CSS sliding text animation

这是起始代码:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);

body { 
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.item-1, 
.item-2, 
.item-3 {
    position: absolute;
  display: block;
    top: 2em;
  
  width: 60%;
  
  font-size: 2em;

    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

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

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

.item-3{
    animation-name: anim-3;
}

@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-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-3 {
    0%, 66.66% { left: -100%; opacity: 0; }
  74.96%, 91.62% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
<p class="item-1">Text 1</p>

<p class="item-2">Text 2</p>

<p class="item-3">Text 3</p>

我需要向动画添加第四段,我知道我必须添加新的 @keyframe anim-4 {},但我想我必须重新计算每个动画的所有关键帧百分比。 有人可以帮我吗?非常感谢!

一个具有更通用代码的想法,您可以轻松扩展:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.container {
  display: flex;
  width: calc(4*200%); /* 4 elements */
  flex-flow: row-reverse;
  animation: 
    move 16s infinite ease-in-out,
    fade 2s infinite 2s alternate ease-in-out; /* 2 = 16/(4*2) */
}

.container * {
  margin-top: 2em;
  margin-right: calc(50%/4); /* 4 elements */
  padding-left: 50px;
  flex: 1;
  font-size: 2em;
}
/* the step is 12.5% = 100/(4*2) */
@keyframes move {
  0% {
     transform:translateX(calc(-7/8*100%));
  }
  12.5%,17.5% { /* 17.5 = 12.5 + 5 (increase if you want the text to stay more time) */
     transform:translateX(calc(-6/8*100%));
  }
  25% {
     transform:translateX(calc(-5/8*100%)); 
  }
  37.5%,42.5% {
     transform:translateX(calc(-4/8*100%)); 
  }
  50% {
     transform:translateX(calc(-3/8*100%)); 
  }
  62.5%,67.5% {
     transform:translateX(calc(-2/8*100%)); 
  }
  75% {
     transform:translateX(calc(-1/8*100%)); 
  }
  87.5%,92.5% {
     transform:translateX(calc(-0/8*100%)); 
  }
  100% {
     transform:translateX(calc(1/8*100%)); 
  }
}

@keyframes fade {
   0%,50% {
     opacity:1;
   }
   100% {
     opacity:0;
   }
}
<div class="container">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
  <p>Text 4</p>
</div>

有 5 个元素:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
body {
  font-family: 'Open Sans', 'sans-serif';
  color: #cecece;
  background: #222;
  overflow: hidden;
}

.container {
  display: flex;
  width: calc(5*200%); /* 5 elements */
  flex-flow: row-reverse;
  animation: 
    move 20s infinite ease-in-out,
    fade 2s infinite 2s alternate ease-in-out; /* 2 = 20/(5*2) */
}

.container * {
  margin-top: 2em;
  margin-right: calc(50%/5); /* 5 elements */
  padding-left: 50px;
  flex: 1;
  font-size: 2em;
}
/* the step is 10% = 100/(5*2) */
@keyframes move {
  0%       {transform:translateX(calc(-9/10*100%));}
  10%,15%  {transform:translateX(calc(-8/10*100%));}
  20%      {transform:translateX(calc(-7/10*100%));}
  30%,35%  {transform:translateX(calc(-6/10*100%));}
  40%      {transform:translateX(calc(-5/10*100%));}
  50%,55%  {transform:translateX(calc(-4/10*100%));}
  60%      {transform:translateX(calc(-3/10*100%));}
  70%,75%  {transform:translateX(calc(-2/10*100%));}
  80%      {transform:translateX(calc(-1/10*100%));}
  90%,95%  {transform:translateX(calc(-0/10*100%));}
  100%     {transform:translateX(calc( 1/10*100%));}

}

@keyframes fade {
   0%,50% {
     opacity:1;
   }
   100% {
     opacity:0;
   }
}
<div class="container">
  <p>Text 1</p>
  <p>Text 2</p>
  <p>Text 3</p>
  <p>Text 4</p>
  <p>Text 5</p>
</div>