Animación de un texto con CSS 3

  • Por
Realizamos un ejemplo básico de animación CSS 3 sobre una capa con un simple texto. Veremos cómo hacer funcionar este primer ejemplo de animación CSS en navegadores basados en Webkit.
En este artículo vamos a realizar nuestro primer ejemplo de animación CSS. Veremos que todo es bastante sencillo y que con unas pocas líneas de código CSS se pueden hacer cosas bastante interesantes. Por lo menos, para los que hayan estudiado un poco sobre la animación realizada con otras tecnologías como Javascript, quedará claro que las animaciones CSS son mucho más fáciles y rápidas de producir.

Antes de empezar, queremos dar un par de referencias sobre artículos tratados anteriormente en DesarrolloWeb.com donde explicamos algunos detalles a conocer previamente, para poder entender bien el presente ejemplo. En concreto os recomendamos empezar la lectura en el artículo que ofrece la Introducción a las Animaciones CSS y también por el articulo donde se explican los Conceptos Básicos sobre Animaciones CSS.

Para los que no lo sepan, remarcamos que para ver este ejemplo necesitamos un navegador basado en Webkit, que es el único que realmente funciona en el momento de escribir este artículo, para poder ver las animaciones CSS 3. Ejemplos de navegadores Webkit son los conocidos Google Chrome o Safari.

Además, tenemos que saber que, como en el momento de escribir este artículo las especificaciones de CSS 3 todavía están en fase de revisión, los atributos que necesitamos de Hojas de Estilo en Cascada para animación no están funcionando, sino que tendremos que utilizar unos atributos especiales que sólo entienden los navegadores basados en webkit. Estos atributos son exactamente iguales a los que comentábamos en el artículo de los conceptos sobre animaciones CSS, lo único que tenemos que añadir el prefijo -webkit- antes del nombre de cada uno de ellos.

Para que os quede más claro vamos a pasar a construir nuestro ejemplo más sencillo ya con el paquete webkit. Este ejemplo va a consistir en un texto dentro de un DIV, que se va a mover de izquierda a derecha y viceversa, por un tiempo infinito.

Lo primero que tenemos que hacer es crearnos nuestros fotogramas clave, para ello utilizamos el siguiente código en nuestra hoja de estilos.

@-webkit-keyframes movimiento-diagonal {
   from {
      left: 0px;
   }
   
   to {
      left: 100px;
   }
}

Como ya se comentó anteriormente, lo que se ha definido en el código anterior es un par de fotogramas clave, que corresponden con el inicio y el fin de la animación. En la práctica ésto hace que se nos mueva nuestro texto, de izquierda a derecha de 0px a 100 px.

Una vez que tenemos este primer paso, vamos a darle las propiedades necesarias a la capa DIV, para terminar de definir nuestra animación:

#anim {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative;
   padding: 2px;
}

En la primera linea le damos el nombre a la animación, que tiene que ser el mismo que el del fotograma clave.

En la segunda le damos una duración de 3 segundos, es decir, la animación tardará en hacer el recorrido sólo 3 segundos.

En la tercera le decimos que lo repita infinitas veces.

La propiedad -webkit-animation-direction: alternate hace que el texto, una vez que haga el recorrido, vuelva a su posición inicial realizando el camino inverso.

Y por último le damos un ancho, y color de fondo y de texto, así como una posición relativa, ya que de lo contrario no funcionaria nuestra animación.

Con esto nuestro código CSS estaría completo, ahora sólo nos quedaría el código HTML que sería tan simple como esto:

<html>
<head>
   <title>Animacion CSS 3</title>
   <link rel="stylesheet" href="animacion-css.css" type="text/css">
</head>
<body>

   <div id="anim">Esto es una animación</div>

</body>
</html>

Con todo esto funcionando nuestra animación quedaría así.

Como podéis ver este ejemplo de animación CSS 3 con Webkit es bien sencillo y no requiere unos conocimientos extensos en CSS. Os dejo el código completo de este ejemplo a continuación:

animacion-css.css

@-webkit-keyframes movimiento-diagonal {
   from {
      left: 0px;
   }
   
   to {
      left: 100px;
   }
}   

#anim {
   -webkit-animation-name: movimiento-diagonal;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: alternate;/*para que vuelva a su posicion inicial */
   width: 100px;
   background-color: Teal;
   color: #fff;
   position: relative;
   padding: 2px;
}

animacion-css.html

<html>
<head>
   <title>Animacion CSS 3</title>
   <link rel="stylesheet" href="animacion-css.css" type="text/css">
</head>
<body>

   <div id="anim">Esto es una animación</div>

</body>
</html>

En el siguiente articulo realizaremos un ejemplo algo más complicado para crear un fondo en movimiento, del tipo de las pantallas de matrix.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

hernando

13/11/2010
agradecimientos
muy buenos los articulos de cs3, agradecimientos a Sara Alvarez

pabu

19/12/2010
NO SE VE LA ANIMACION
Hola! probe la animacion del ejercicio pero en IE NI EN FIREFOX se puede ver, solo en GOOGLE CHROME.... puede ser? gracias igual por el articulo muy bueno.

midesweb

11/2/2011
efectivamente, debes usar webkit
Hola,

Lo comentábamos en el artículo, que en el momento de redactarlo, las animaciones CSS para texto funcionaban solamente en navegadores basados en webkit. Por ello solo te funcionaba en Google Chorme. Pero en breve, si no es ya mismo, todos los navegadores lo soportarán. Pero claro, en ese caso habrá que quitar el prefijo -webkit a las propiedades CSS, para que las entiendan todos navegadores.
Ciao!

Facundo

03/12/2012
otros navegadores
para que funcione en FF hay que agregar en todos los lugares que diga -webkit- también la opción para -moz- u otros como -o- (opera) -ms- (IE)