CSS 文本幻灯片

Question

我找到了一个我想用于我的网站的 sn-p。 Snippet 是一个带有 3 个框的文本滑块。你可以在这里看到它：

@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">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

但对于我的项目，我需要 4 个文本框。我试图调整脚本，但我有错误，我不明白为什么。如果我添加另一个文本框，调整文本框的类，编辑 css 并调整文本框的时间，幻灯片效果很好，直到最后一张（新添加的）幻灯片出现。然后显示第一行，即使最后一张幻灯片还没有完成。谁能帮我找出我做错了什么？

@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,
.item-4 {
	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;
}

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

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

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

问候

Answer 1

这里的问题是定义动画步骤，如果你看一下CSS，有一个keyframe用百分比定义，如何分割动画。喜欢：

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

行首的百分比表示：

从 FIRST VALUE 到 SECOND VALUE 并在那里结束（下一行）。

---

如果你看keyframe 3，你还没有定义最新的百分比值，所以如果你添加它，它会很好用。完整代码如下。

发件人：

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75% { left: 110%; opacity: 0; }
}

收件人：

@keyframes anim-3 {
    0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@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,
.item-4 {
	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;
}

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

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

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>

Answer 2

代码中的小改动。您错过了 anim-3 keyframes 中的第二个参数以从屏幕上删除此文本

@keyframes anim-3 {
        0%, 50% { left: -100%; opacity: 0; }
      56.5%, 68.5% { left: 25%; opacity: 1; }
      75%, 100% { left: 110%; opacity: 0; }

    }

@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,
.item-4 {
	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;
}

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

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

@keyframes anim-2 {
	0%, 25% { left: -100%; opacity: 0; }
  31.5%, 43.5% { left: 25%; opacity: 1; }
  50%, 100% { left: 110%; opacity: 0; }
}

@keyframes anim-3 {
	0%, 50% { left: -100%; opacity: 0; }
  56.5%, 68.5% { left: 25%; opacity: 1; }
  75%, 100% { left: 110%; opacity: 0; }
  
}

@keyframes anim-4 {
	0%, 75% { left: -100%; opacity: 0; }
  81.5%, 93.5% { left: 25%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

<p class="item-1">This is your last chance. After this, there is no turning back.</p>

<p class="item-2">You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe.</p>

<p class="item-3">You take the red pill - you stay in Wonderland and I show you how deep the rabbit-hole goes.</p>

<p class="item-4">Lorum Ipsum Dolor Sit Amet. Lorum Ipsum Dolor Sit Amet.</p>