Animar texto con CSS3 y WebKit para Chrome y Safari

Explicación del uso de las etiquetas pulse y bounce, integradas dentro del motor WebKit (Chrome y Safari) para animar textos con CSS· puro.

Una de las grandes maravillas sobre el uso del CSS es que con muy poco puedes lograr bastante, es sorprendente como con pequeños cambios que hagas a tu código, unos cuantos atributos o un ajuste de clases, puedes crear un mejor ambiente para atraer, agradar y lograr que el aspecto de tu sitio web sea más placentero.

Muchas veces nos olvidamos de los detalles, cuando en muchas ocasiones estos son fundamentales para lograr el enganche con los visitantes de tu web. La información necesita presentarse de manera adecuada, y con los detalles podemos dar ese toque de diferencia que hará que un usuario prefiera nuestro sitio sobre los otros.

En la actualidad, los navegadores permiten experimentar a gran escala con las hojas de estilo, con excepción de Internet Explorer, todos soportan la mayoría de las propiedades con las que cuenta este lenguaje. En este caso vamos a hablar de distintos tipos de animaciones hechas con CSS.

Animaciones de texto con CSS

Uno de los pequeños pero poderosos efectos que podemos crear hoy en día de manera fácil, es la animación de texto. Las animaciones, comúnmente conocidas en el ambiente del diseño, consisten en agregar un efecto de movimiento a un objeto, en nuestro caso al texto o a un div, lo que le agrega la sensación de que está en diferentes planos en ciertos momentos.

En el pasado existían etiquetas como “marquee” o “blink” que podían agregar ciertas animaciones primitivas a nuestro texto, llegó a tal grado el mal uso de ellas que actualmente se encuentran descontinuadas, y al verlas en una página pueden causar la indigestión de más de uno.

Hasta hace poco para realizar este efecto de manera correcta se tenía que recurrir a herramientas de diseño como Flash. En este momento CSS3 nos ofrece la capacidad para crearlo al agregar unas cuantas líneas de código a nuestra hoja de estilo.

Las animaciones CSS (@-webkit-keyframes) son parte del paquete propuesto por WebKit para la estandarización de CSS3, es por ello que actualmente sólo pueden ser visualizadas en Google Chrome y Safari. Su objetivo es poder brindar al desarrollador la capacidad de crear y realizar contenido gráfico sencillo pero a la vez enriquecedor.

Tipos de animaciones de texto con WebKit

Podemos manejar dos tipos de animación, “pulse” y “bounce”, efectos bastante conocidos para aquellos que han manejado algún programa de diseño anteriormente. Para agregarlos a nuestro objeto, no hay que tener un dominio total de CSS, basta con agregar las siguientes líneas en nuestro CSS;

@-webkit-keyframes pulse {
   from {
   opacity: 0.0; /* Nivel de transparencia inicial */
   font-size: 50px; /* Tamaño inicial de la font en la animación */
   }
   to {
   opacity: 0.8; /* Nivel de Transparencia final */
   font-size: 100px; /* Tamaño final de la font en la animación */
   }
   }
   #animacionpulse {
   -webkit-animation-name: pulse; /* El nombre del efecto que estamos agregando */
   -webkit-animation-duration: 2s; /* Tiempo que durará la animación */
   -webkit-animation-iteration-count: infinite; /* Las veces que queremos reproducir la animación */
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate; /* Propiedad utilizada para que el texto regrese al tamaño de origen de manera gradual */
   } 

   @-webkit-keyframes bounce {
   from {
   left: 0px;
   }
   to {
   left: 200px;
   }
   }
   #animacionbounce {
   -webkit-animation-name: bounce;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;
   width: 50%;
   padding: 0.2em 1em;
   position: relative;  /*La posición relative es necesaria */
   background: crimson;
   }
   

Y finalmente agregamos las siguientes líneas en el body de nuestro sitio:

<div id="animacionpulse" style="font-family: Arial; text-align: center;"> Probando Pulse! </div> 

<div id="animacionbounce"> Probando Bounce! </div>

Lo que hacemos básicamente es agregar la librería de animaciones @-webkit-keyframes, después especificamos que tipo de efecto queremos usar ya sea “pulse” como en el primer caso, o “bounce” como en el segundo, y procedemos a dar los valores necesarios para que se efectué la acción.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

Como podemos observar los dos efectos son bastantes sencillos de aplicar y muy parecidos en composición, y si experimentamos podemos crear efectos más elaborados y complejos agregando atributos a estas estructuras básicas.

Crear banners animados con CSS y WebKit

Una de las funcionalidades que podemos darle a este efecto, es para crear un banner con una atmósfera donde el elemento seleccionado se encuentre en movimiento mientras que el resto de los elementos se encuentren estáticos o se difumen, y así lograr centrar la atención en ese punto.

Para realizarlo basta con aplicar el elemento “webkit-transform” que nos permite modificar la estructura del div al momento de la animación. El código CSS sería el siguiente:

 @-webkit-keyframes pulse {
   0% {
   background-color: black;
   opacity: 1.0;
   -webkit-transform: scale(1.0) rotate(0deg);
   }
   20% {
   background-color: black;
   opacity: 0.8;
   -webkit-transform: scale(1.2) rotate(-5deg);
   }
   40% {
   background-color: black;
   opacity: 0.6;
   -webkit-transform: scale(1.0) rotate(5deg);
   }
   55% {
   background-color: black;
   opacity: 0.8;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   65% {
   background-color: black;
   opacity: 0.9;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   100% {
   background-color: black;
   opacity: 1.0;
   -webkit-transform: scale(2.0) rotate(0deg);
   }
   }

   .banner {
   -webkit-animation-name: pulse;
   -webkit-animation-duration: 2s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-direction: alternate;
   color:FFF;
   background-color: black;
   width: 10%;
   padding: 0.2em 1em;
   margin: 6em;
   }

Y el HTML correspondiente:

<div>
   <p>Coches usados!
       <span style="font-size:12px">Ven y conoce el nuevo carro 3008. Maneja hacia el futuro!</span> </p>
</div>

Con esto obtenemos un recuadro en movimiento de color negro con el mensaje que incluimos en el div con clase “banner”.

>>> Aquí podemos ver la demo. <<< (recuerda que sólo se ve en Google Chrome y Safari)

Conclusiones

Como en todos los casos del diseño, no hay que exagerar el uso de un efecto, la cuestión aquí es saber donde y cuando aplicar cada técnica. El exceso sólo puede confundir e incluso abrumar a la persona que navega por nuestro sitio salga de nuestro hosting.

El animar un texto produce un resultado bastante atractivo, pero no por ello se deberá aplicar a todo el texto que nos lleguemos a encontrar. Debemos saber bien la función de cada parte de nuestro sitio y al tener esto como noción, nuestro mismo sentido común nos dirá en donde aplicarlo.

Por ejemplo, imagina que tenemos una página de blog donde constantemente exponemos cierta cantidad de artículos, ahora visualiza todos esos escritos con un efecto de animación, es algo frustrante ¿No lo crees?, no queremos que este efecto pronto se convierta en otra etiqueta “blink”.

Por otra parte, es muy importante tener en cuenta que este efecto no se visualiza en todos los navegadores ni mucho menos, sino que sólo se ve en Chrome y Safari por el momento. Esperemos que con el tiempo se integre en la estandarización de CSS3 y el resto de navegadores lo implementen.