Como hemos visto en multitud entradas en CSS, CSS nos sirve para prácticamente todo lo que queremos hacer, este ejemplo que les traigo permite animar textos muy fácilmente con muy poco CSS pero el efecto es bastante logrado y te sorprenderá lo sencillo que es; de En esta entrada veremos cómo crear el siguiente efecto para nuestras letras:

Muchas veces pasamos por alto estos pequeños detalles que hacen realmente la diferencia, entrar en una web y ver que todo carga estático es algo aburrido, pero si vemos unas sencillas animaciones como la mostrada anteriormente, pues le da otro enfoque al sitio que estemos desarrollando, son pequeñas animaciones que podemos aplicar en nuestros textos a nivel de todo el párrafo o letra por letra como quieras pero aquí les traemos una idea básica para animar los textos con un poco de CSS como veremos a continuación.

Es muy sencillo crear esta animación; solo necesitamos un poco de CSS como veremos a continuación y conocer el gran truco para animar nuestros textos con CSS

Animaciones retrasadas en CSS con la propiedad animation-delay, el gran truco

Como se especifica en el título, se utiliza de la propiedad animation-delay para retardar el desplazamiento de un grupo de las letras y con eso conseguimos el efecto del desplazamiento en el texto que especifiquemos como vemos en la imagen promocional; dicho aplazamiento se consigue con el selector nth-child:

.words span:nth-child(2) {
  animation-delay: 0.4s;
}
.words span:nth-child(3) {
  animation-delay: 0.8s;
}
.words span:nth-child(4) {
  animation-delay: 1.3s;
}

La animación es muy sencilla como vemos en el siguiente código, solo se aplica un desplazamiento:

@keyframes move {
  0% {
    transform: translate(-25%, 0);
  }
  50% {
    text-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  }
  100% {
    transform: translate(33%, 0);
  }
}

Otro punto muy importante es el text-shadow que permite al inicio y final del desplazamiento y de esta forma puede reiniciar el efecto cuando las letras están ocultas y de esta forma no dañamos el flujo de la animación.

Como vemos este es otro efecto basado en animaciones que queda realmente bien en las aplicaciones y que no requiere mucho esfuerzo por nuestra parte, solo un poco de ingenio.

El fuente del experimento puedes encontrarlo aquí.

Efecto de sombreado sobre el texto: animación CSS:

Esta otra animación, vemos un texto de estilo advertencia, como puedes suponer, se emplea la propiedad text-shadow de CSS en conjunto con la animación correspondiente:

El código HTML el simplemente indicar el texto como puedes suponer

<div class="area">
  Texto
</div>

El CSS si es más fascinante y debes como punto importante para que el efecto sea similar al mostrado debes de indicar el color del texto igual al del color de fondo que en este caso es blanco, otros punto importante es definir en la animación varias veces el sombreado del texto con la propiedad ya mencionada y esto es para que la animación tenga mayor efecto en el sombreado:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
 background:url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/noisy_net.png') repeat;
  font-family: "Open Sans",  Impact;
}
.area{
  text-align:center;
  font-size:6.5em;
  color:#fff;
  letter-spacing: -7px;
  font-weight:700;
  text-transform:uppercase;
  animation:blur 2s ease-out infinite;
  text-shadow:0px 0px 5px #fff,
      0px 0px 7px #ff0000;
}

@keyframes blur{
  from{
      text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #ff0099,
      0px 0px 150px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px 10px 100px #ff0099,
      0px -10px 100px #ff0099,
      0px -10px 100px #ff0099;
	  }
}

El ejemplo original lo puedes tomar del siguiente enlace que tome como base para hacer el anterior; que es prácticamente el mismo código y por ende la misma animación o efecto salvo por el cambio del sombreado inicial del texto, y la velocidad de la animación que fue aumentada para que no les de ataques de epilepsia: ejemplo original.

Conclusiones sobre las Animaciones retrasadas en textos CSS

En la actualidad prácticamente todos los navegadores soportan las animaciones en CSS, con todas las propiedades CSS que existen, las posibilidades que tenemos que hacer son infinitas, note que solo empleamos unas pocas como vemos en el anterior sección, imaginate cambiar el color del texto, tamaño, opacidad, que son las más comunes, como vimos aquí el sombreado se nota muy bien en los textos, aquí el límite es tu imaginación, el motor para las animaciones en los navegadores está muy logrado y no tendremos problemas para realizar las animaciones en nuestros textos y letras en general como vimos en la anterior sección.