有没有办法通过css慢慢地向文本添加字母?

Question

我想显示一个单词(假设慢(，有没有办法先显示"慢"，然后通过CSS动画在中间添加几个O， 从慢到啪啪啪。

我正在使用最新的chrome，所以欢迎任何CSS3/HTML5功能。

Answer 1

您可以考虑对范围的最大宽度进行动画处理，如下所示。

.slow {
display: inline-block;
vertical-align: bottom;
max-width: 0.5rem;
overflow: hidden;
animation: slow 2s ease forwards;
}
@keyframes slow {
from {
max-width: 0.5rem;
}
to {
max-width: 3rem;
}
}

<span>Sl</span><span class="slow">oooooo</span><span>w</span>

Answer 2

您可以将所有额外的o添加为<span>元素，然后使用:nth-child连续地将它们动画化，以逐个选择它们：

html, body {
height: 100%;
}
body {
display: flex;
}
h1 {
font-size: 10vw;
margin: auto;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
h1 span {
max-width: 0;
overflow: hidden;
display: inline-block;
vertical-align: bottom;
}
@keyframes in {
from { max-width: 0; opacity: 0; }
25% { max-width: 1em; opacity: 0; }
to { max-width: 1em; opacity: 1; }
}
h1 span {
animation: in 1s;
animation-fill-mode: forwards;
}
h1 span:nth-child(1){ animation-delay: 0s; }
h1 span:nth-child(2){ animation-delay: 1s; }
h1 span:nth-child(3){ animation-delay: 2s; }
h1 span:nth-child(4){ animation-delay: 3s; }
h1 span:nth-child(5){ animation-delay: 4s; }
h1 span:nth-child(6){ animation-delay: 5s; }
h1 span:nth-child(7){ animation-delay: 6s; }
h1 span:nth-child(8){ animation-delay: 7s; }
h1 span:nth-child(9){ animation-delay: 8s; }

<h1>Slo<span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span><span>o</span>w</h1>

Answer 3

为了好玩，这里有一个实际的纯CSS解决方案(即只需要一个HTML元素(，使用contentCSS属性：

.expanding-slow::before {
content: "Slo";
animation: expand-slow linear 3s both;
}
.expanding-slow::after { content: "w"; }
@keyframes expand-slow {
0% { content: "Slo"; }
20% { content: "Sloo"; }
40% { content: "Slooo"; }
60% { content: "Sloooo"; }
80% { content: "Slooooo"; }
100% { content: "Sloooooo"; }
}
.expanding-slow--smooth::before {
display: inline-block;
content: "Sloooooo";
max-width: 3ch;
overflow: hidden;
vertical-align: text-top;
animation: expand-slow--smooth linear 3s both;
}
.expanding-slow--smooth::after { content: "w"; }
@keyframes expand-slow--smooth {
0% { max-width: 3ch; }
100% { max-width: 8ch; }
}

Using <code>content</code>:
<p class="expanding-slow"></p>
Using <code>max-width</code>:
<p class="expanding-slow--smooth"></p>

Answer 4

这是 @DarioSanchezMartinez 的答案的修订版本，更接近您的规格。

/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}
#animate-2 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
}
#animate-3 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
}
#animate-4 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

SL<span id="animate-1">o</span><span id="animate-2">o</span><span id="animate-3">o</span><span id="animate-4">o</span>W

Answer 5

是的！

/* Taken from http://animista.net/play/entrances/fade-in */
#animate-1 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;

}
#animate-2 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 1s;
}
#animate-3 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 2s;
}
#animate-4 {
	-webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation-delay: 3s;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

<h1 id="animate-1">S</h1>
<h1 id="animate-2">L</h1>
<h1 id="animate-3">O</h1>
<h1 id="animate-4">W</h1>