css3 循环列表中的单词

Question

我正在尝试使用 UL 中的 Li 条目一次显示一个词。该循环是通过 CSS3 动画实现的。我可以按顺序显示单词，但不确定如何在下一个单词出现之前隐藏当前单词：

#list {position:relative}
#list li {
    animation: showWord 2.5s linear infinite 0s;
    position:absolute;
    opacity:0;
}

#list li:nth-child(2) {
 animation-delay: 0.5s;
}
#list li:nth-child(3) {
 animation-delay: 1s;
}
#list li:nth-child(4) {
 animation-delay: 1.5s;
}
#list li:nth-child(5) {
 animation-delay: 2s;
}

@keyframes showWord {
 from,
  49.9% {
    opacity: 1;
  }
  50%,
  to {
    opacity: 0;
  }
 
}

/* demo stylin' */

* {
  list-style-type:none;
  font-size:30px;
  font-family:courier
}

<ul id="list">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

Answer 1

只需删除 position: absolute 行

#list {position:relative}
#list li {
    animation: showWord 2.5s linear infinite 0s;
    opacity:0;
}

#list li:nth-child(2) {
 animation-delay: 0.5s;
}
#list li:nth-child(3) {
 animation-delay: 1s;
}
#list li:nth-child(4) {
 animation-delay: 1.5s;
}
#list li:nth-child(5) {
 animation-delay: 2s;
}

@keyframes showWord {
 from,
  49.9% {
    opacity: 1;
  }
  50%,
  to {
    opacity: 0;
  }
 
}

/* demo stylin' */

* {
  list-style-type:none;
  font-size:30px;
  font-family:courier
}

<ul id="list">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

Answer 2

没有有一个 animation-delay 属性，但这对我们没有帮助。这会延迟动画的开始，但在开始后会持续运行s。

#解决方案： 关键帧没有变化

你需要做一点心算：

我希望动画运行 10 秒。

~加上~

我希望动画在迭代之间延迟 2 秒。

~ 等于 ~

总共 10 秒

所以当你调用关键帧动画时，你使用的是总秒数，并且每次迭代延迟需要 2 秒以上：

#list {position:relative}
#list li {
    animation: showWord 10s linear infinite 0s;
    position:absolute;
    opacity:0;
}

#list li:nth-child(2) {
 animation-delay: 2s;
}
#list li:nth-child(3) {
 animation-delay: 4s;
}
#list li:nth-child(4) {
 animation-delay: 6s;
}
#list li:nth-child(5) {
 animation-delay: 8s;
}

@keyframes showWord {
  20%, 100% {
    opacity: 0;
  }
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}
/* demo stylin' */

* {
  list-style-type:none;
  font-size:30px;
  font-family:courier
}

<ul id="list">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>Four</li>
 <li>Five</li>
</ul>

希望对你有帮助

css3 循环列表中的单词

css3 cycle words in a list

css

animation

cycle