Home / Questions / 235426
Accepted
zerokira
Asked: 2020-02-06 09:06:12 +0800 CST 2020-02-06 09:06:12 +0800 CST

如何使用动画CSS淡入更改文本

  • 772

我正在尝试用动画更改文本，但我仍然不知道该怎么做。我有以下代码：

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
	<p>Here is a sentence <span class="blink_me" id="rotate">default</span> is what changes</p>

	<ul style="display:none">
		<li>test1</li>
		<li>bob</li>
		<li>next</li>
		<li>last</li>
		<li>PABLO</li>
		<li>ANDRES</li>
	</ul>

这个想法是标签的元素被显示li并改变如下：FadeIn Animation but using onlyCSS

javascript

1 Answers

  1. Best Answer

    你可以有两个动画：

    • 一个闪烁（您已经创建）
    • 另一个更改文本（待创建）

    注意：我最初使用::before/提出了一个解决方案::after，但它在某些浏览器中没有很好地完成动画。您可以在历史记录中查看该解决方案。

    您可以将文本放在多个span内部，然后通过将其宽度从 0 更改为 auto（具有overflow: hidden）来显示/隐藏。所以你要做的是计算时间（你有 6 个不同的词，如果动画持续 100% 的时间，每个词应该是 16.6%）。

    然后唯一剩下的就是调整动画的时间，使闪烁与单词变化相吻合。

    在这里你可以看到它的工作：

    .blink_me {
  display: inline-block;
  vertical-align: bottom;
  animation: blinker 1s linear infinite;
  animation-delay: -0.5s;
}

.blink_me span {
  float: left;
  overflow: hidden;
  animation: hideShow 6s linear infinite;
}

.blink_me span:nth-child(1) { animation-delay: -0s; }
.blink_me span:nth-child(2) { animation-delay: -1s; }
.blink_me span:nth-child(3) { animation-delay: -2s; }
.blink_me span:nth-child(4) { animation-delay: -3s; }
.blink_me span:nth-child(5) { animation-delay: -4s; }
.blink_me span:nth-child(6) { animation-delay: -5s; }

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
@keyframes hideShow {
  0%, 16.6%, 33.33%, 100% { width: 0; }
  16.66%, 33.3% { width: auto; }
}
    <p>
  Here is a sentence 
  <span class="blink_me" id="rotate">
    <span>test1</span>
    <span>bob</span>
    <span>next</span>
    <span>last</span>
    <span>PABLO</span>
    <span>ANDRES</span>
  </span> 
  is what changes
</p>

    • 5