html - texto - tamaño de letra en css

¿Hay una manera de agregar letras al texto lentamente por css?

Question

Quiero mostrar una palabra (supongamos que Slow), ¿hay alguna manera de mostrar primero ''slow'' y luego, mediante la animación CSS, agregar pocas O en el centro, pasando de Slow a Sloooooow?

Estoy usando Chrome más reciente, así que cualquier característica de CSS3 / HTML5 es bienvenida.

Answer 1

¡Sí!

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

Answer 2

Aquí hay una versión revisada de la respuesta de @DarioSanchezMartinez que se ajusta un poco más a sus especificaciones.

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

Puede agregar todas las o s adicionales como elementos <span> y luego animarlas todas consecutivamente usando :nth-child para seleccionarlas una por una:

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 4

Puedes considerar animar el ancho máximo de un tramo como se muestra a continuación.

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

Solo por diversión, aquí hay una solución en CSS puro real (es decir, solo se requiere un único elemento HTML), utilizando la propiedad CSS del content :

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