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

<强>都能跟得上有一个动画延迟属性，但这对我们没有帮助。这延迟了动画的开始，但在它开始后它会持续运行。

#Solution：没有变更的关键帧

你需要做一点心算：

我希望动画运行10秒钟。

~plus~

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

~equals~

总共10秒

因此，当您调用关键帧动画时，使用总秒数，每次迭代延迟需要2秒钟：

＆＃13;

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

＆＃13;

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

＆＃13;

希望它可以帮到你

列表中的css3循环单词

2 个答案: