Gibt es eine Möglichkeit, Buchstaben langsam per CSS zu Text hinzuzufügen? [closed]

Question 1

Ich möchte ein Wort anzeigen (angenommen, langsam), gibt es eine Möglichkeit, zuerst “langsam” anzuzeigen und dann durch CSS-Animation ein paar O’s in der Mitte hinzuzufügen, wodurch es von langsam zu langsam wird.

Ich verwende das neueste Chrome, daher sind alle CSS3/HTML5-Funktionen willkommen.

Question 2

Sie können die maximale Breite einer Spanne wie unten animieren.

.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>

Question 3

Sie könnten alle zusätzlichen hinzufügen oist wie <span> Elemente und animieren Sie sie dann alle nacheinander mit :nth-child um sie einzeln auszuwählen:

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>

Question 4

Nur zum Spaß, hier ist eine Lösung in echtem reinem CSS (dh nur ein einziges HTML-Element erforderlich), mit der content CSS-Eigenschaft:

.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>

Question 5

Hier ist eine überarbeitete Version der Antwort von @DarioSanchezMartinez , die Ihrer Spezifikation etwas näher kommt.

/* 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

Question 6

Ja!

/* 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>