DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-08-2016

En esta entrada veremos cómo crear el siguiente efecto para nuestras letras:

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

Animaciones retrasadas, 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 letras lo cual 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í.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Referencia de las propiedades CSS más empeladas

Referencia de las propiedades CSS más empeladas

Árbol arcoíris creciente

Árbol arcoíris creciente

Hover over the cards

Hover over the cards

Algunos artículos que te pueden interesar

Efectos con hover y transition en CSS (parte 1)

Efectos con hover y transition en CSS (parte 1)

En esta entrada veremos algunos experimentos con transiciones en CSS empleando además selectores (hover, after y before).

Andrés Cruz 25-06-2015

Creando una web básica con Flex en HTML

Creando una web básica con Flex en HTML

En esta entrada veremos cómo crear una web básica empleando flex con las propiedades flex-grow, flex-shrink y flex-basis.

Andrés Cruz 07-04-2016

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015