Tutorial animación CSS3: Texto rebotando!

Ene 22, 2013Tutoriales4 Comentarios

En este tutorial vamos a crear una animación en CSS3 utilizando la propiedad animation junto con @keyframes para definir los fotogramas clave de la animación, haciendo caer las letras de un texto y que reboten como si fueran pelotas de goma.

Nivel: medio/avanzado
Duración: 20 min
Ver el resultado final del ejercicio  (utilizar Chrome, safari, firefox u opera, no funciona con IE9)

animacion-css3-avanzada

1.- El HTML

Sencillo, vamos a crear un documento con una palabra (REBOTE!) haciendo que cada letra esté incluida dentro de un span para aplicarles un estilo distinto a través de un selector de id y poder desfasar la caída de cada letra:

<!doctype html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Texto rebotando en CSS3</title>
 </head>
<body>
<span id="r1">R</span>
<span id="r2">E</span>
<span id="r2">B</span>
<span id="r4">O</span>
<span id="r5">T</span>
<span id="r6">E</span>
<span id="r7">!</span>
</body>
</html>

2.- Estilos para body

Vamos a crear los estilos css en el documento HTML para simplificar. Dentro de nuestra etiqueta <head>, antes del cierre, creamos la correspondiente etiqueta <style> en la cual vamos a empezar a crear los estilos:

<style type=»text/css»>
</style>

Creamos un estilo para el <body> de nuestra página, muy facilito, simplemente para cambiar el tipo de letra a arial, centrarlo y ponerlo en negrita:

<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-weight: bold;
}
</style>

3.- Estilos para las letras: preparando la animación

Aunque la animación para todas las letras es casi idéntica, debemos cambiar una propiedad en cada una para que no todas las letras caigan al mismo tiempo. Por ello tenemos que crear un estilo distinto para cada letra usando los id que aplicamos a cada <span>. Empezamos por la primera:

#r1 {
position: relative;
animation:botar 3s 250ms normal;
-webkit-animation:botar 3s 250ms normal;
-moz-animation:botar 3s 250ms normal;
-ms-animation:botar 3s 250ms normal;
-o-animation:botar 3s 250ms normal;
}

y explicamos:

#r1 {
poco que explicar, el primer span tiene asignado el id «r1» por lo que usamos un selector de id con el mismo nombre para aplicar el estilo.

position: relative;
Como vamos a animar la posición del <span> debemos indicar que la propiedad position: va a ser relativa para poder modificarla.

animation: botar 3s 250ms normal;
La clave, la nueva propiedad CSS3 animation nos permite animar una (o varias) propiedad CSS a lo largo del tiempo cambiando sus valores. Con animation: indicamos al estilo que vamos a usar una animación con las siguientes propiedades:

  • botar: Es el nombre de la animación que aún no está creada y vamos a definir a continuación. Puede ser cualquier nombre.
  • 3s: Es la duración total de la animación, definido en segundos (s) o milisegundos (ms). En este caso nuestra animación durará 3 segundos.
  • 250ms: El siguiente valor es el retardo de la animación, cuánto tiempo va a tardar en comenzar la animación en segundos (s) o milisegundos (ms). Es el valor clave para desfasar la animación de cada letra y el único valor que va a cambiar en cada <span>.
  • normal: Determina cómo se va a reproducir la animación, si solo hacia adelante siempre o hacia adelante y atrás cuando se repita.

-webkit-animation:botar 3s 250ms normal;
-moz-animation:botar 3s 250ms normal;
-ms-animation:botar 3s 250ms normal;
-o-animation:botar 3s 250ms normal;
La propiedad animation: aún no está soportada de forma nativa por todos los navegadores y debemos usar los vendor prefixes para que funcione adecuadamente en cada uno.

Una vez que tenemos el estilo para la primera letra, lo copiaremos 6 veces (tenemos 7 letras) cambiando el nombre del selector (#r2, #r3, #r4…) y para desfasar la animación de las letras cambiaremos también el retardo. Los estilos quedarían así:

#r1 {
 position: relative;
 animation: botar 3s 250ms normal;
 -webkit-animation:botar 3s 250ms normal;
 -moz-animation:botar 3s 250ms normal;
 -ms-animation:botar 3s 250ms normal;
 -o-animation:botar 3s 250ms normal;
}
#r2 {
 position: relative;
 animation: botar 3s 500ms normal;
 -webkit-animation:botar 3s 500ms normal;
 -moz-animation:botar 3s 500ms normal;
 -ms-animation:botar 3s 500ms normal;
 -o-animation:botar 3s 500ms normal;
}
#r3 {
 position: relative;
 animation: botar 3s 2000ms normal;
 -webkit-animation:botar 3s 2000ms normal;
 -moz-animation:botar 3s 2000ms normal;
 -ms-animation:botar 3s 2000ms normal;
 -o-animation:botar 3s 2000ms normal;
}
#r4 {
 position: relative;
 animation: botar 3s 1000ms normal;
 -webkit-animation:botar 3s 1000ms normal;
 -moz-animation:botar 3s 1000ms normal;
 -ms-animation:botar 3s 1000ms normal;
 -o-animation:botar 3s 1000ms normal;
}
#r5 {
 position: relative;
 animation: botar 3s 750ms normal;
 -webkit-animation:botar 3s 750ms normal;
 -moz-animation:botar 3s 750ms normal;
 -ms-animation:botar 3s 750ms normal;
 -o-animation:botar 3s 750ms normal;
}
#r6 {
 position: relative;
 animation: botar 3s 1500ms normal;
 -webkit-animation:botar 3s 1500ms normal;
 -moz-animation:botar 3s 1500ms normal;
 -ms-animation:botar 3s 1500ms normal;
 -o-animation:botar 3s 1500ms normal;
}
#r7 {
 position: relative;
 position: relative;
 animation: botar 3s normal;
 -webkit-animation:botar 3s normal;
 -moz-animation:botar 3s normal;
 -ms-animation:botar 3s normal;
 -o-animation:botar 3s normal;
}

4.- Definiendo la animación

Si recordáis, en la propiedad animation: hemos indicado que íbamos a utilizar una animación llamada botar que aún no habíamos creado. Pues ha llegado el momento:

@keyframes botar {
La propiedad @keyframes sirve para indicar al navegador cómo va a ser la animación y para nombrarla. En este caso, le ponemos el mismo nombre, botar,  que hemos utilizado en animation: y a continuación vamos a definir los fotogramas clave:

0% {top:auto; animation-timing-function:ease-in;}
El primer fotograma clave indica la posición inicial de la letra. 0% nos informa que estamos al principio de la animación, mientras que top:auto; es la propiedad que vamos a animar. Recordamos que la propiedad top: indica la distancia que desplazamos el elemento <span> desde su posición original hacia abajo. En este caso, con position:auto; dejamos el elemento en su posición inicial al principio de la animación. Con animation-timing-function:ease-in cambiamos la aceleración de la animación para conseguir el efecto de rebote elástico.

A partir de aquí vamos definiendo el resto de fotogramas clave en distintos porcentajes de tiempo y cambiando la posición top para hacer rebotar la letra cada vez menos:
30% {top:200px; animation-timing-function:ease-out;}
45% {top:100px; animation-timing-function:ease-in;}
60% {top:200px; animation-timing-function:ease-out;}
68% {top:150px; animation-timing-function:ease-in;}
76% {top:200px; animation-timing-function:ease-out;}
80% {top:175px; animation-timing-function:ease-in;}
84% {top:200px;animation-timing-function:ease-out;}
86% {top:188px; animation-timing-function:ease-in;}
88% {top:200px; animation-timing-function:ease-out;}
87% {top:194px; animation-timing-function:ease-in;}
88% {top:200px; animation-timing-function:ease-out;}
100% {top:200px;}

De nuevo nos pasa lo mismo con la propiedad @keyframes, no está soportada de forma nativa por todos los navegadores y debemos repetirla usando los vendor prefixes. Nos quedaría así:

@keyframes botar{
 0% {top:auto; animation-timing-function:ease-in;}
 30% {top:200px; animation-timing-function:ease-out;}
 45% {top:100px; animation-timing-function:ease-in;}
 60% {top:200px; animation-timing-function:ease-out;}
 68% {top:150px; animation-timing-function:ease-in;}
 76% {top:200px; animation-timing-function:ease-out;}
 80% {top:175px; animation-timing-function:ease-in;}
 84% {top:200px; animation-timing-function:ease-out;}
 86% {top:188px; animation-timing-function:ease-in;}
 88% {top:200px; animation-timing-function:ease-out;}
 87% {top:194px; animation-timing-function:ease-in;}
 88% {top:200px; animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-webkit-keyframes botar{
 0% {top:auto; -webkit-animation-timing-function:ease-in;}
 30% {top:200px; -webkit-animation-timing-function:ease-out;}
 45% {top:100px; -webkit-animation-timing-function:ease-in;}
 60% {top:200px; -webkit-animation-timing-function:ease-out;}
 68% {top:150px; -webkit-animation-timing-function:ease-in;}
 76% {top:200px; -webkit-animation-timing-function:ease-out;}
 80% {top:175px; -webkit-animation-timing-function:ease-in;}
 84% {top:200px; -webkit-animation-timing-function:ease-out;}
 86% {top:188px; -webkit-animation-timing-function:ease-in;}
 88% {top:200px; -webkit-animation-timing-function:ease-out;}
 87% {top:194px; -webkit-animation-timing-function:ease-in;}
 88% {top:200px; -webkit-animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-moz-keyframes botar{
 0% {top:auto; -moz-animation-timing-function:ease-in;}
 30% {top:200px; -moz-animation-timing-function:ease-out;}
 45% {top:100px; -moz-animation-timing-function:ease-in;}
 60% {top:200px; -moz-animation-timing-function:ease-out;}
 68% {top:150px; -moz-animation-timing-function:ease-in;}
 76% {top:200px; -moz-animation-timing-function:ease-out;}
 80% {top:175px; -moz-animation-timing-function:ease-in;}
 84% {top:200px; -moz-animation-timing-function:ease-out;}
 86% {top:188px; -moz-animation-timing-function:ease-in;}
 88% {top:200px; -moz-animation-timing-function:ease-out;}
 87% {top:194px; -moz-animation-timing-function:ease-in;}
 88% {top:200px; -moz-animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-o-keyframes botar{
 0% {top:auto; -o-animation-timing-function:ease-in;}
 30% {top:200px; -o-animation-timing-function:ease-out;}
 45% {top:100px; -o-animation-timing-function:ease-in;}
 60% {top:200px; -o-animation-timing-function:ease-out;}
 68% {top:150px; -o-animation-timing-function:ease-in;}
 76% {top:200px; -o-animation-timing-function:ease-out;}
 80% {top:175px; -o-animation-timing-function:ease-in;}
 84% {top:200px; -o-animation-timing-function:ease-out;}
 86% {top:188px; -o-animation-timing-function:ease-in;}
 88% {top:200px; -o-animation-timing-function:ease-out;}
 87% {top:194px; -o-animation-timing-function:ease-in;}
 88% {top:200px; -o-animation-timing-function:ease-out;}
 100% {top:200px;}
}

5.- Resultado final

Ya está, como veis el código queda muy largo por culpa de los vendor prefixes al tener que repetir 4 veces lo mismo con distintos prefijos, pero de momento es lo que tenemos hasta estas propiedades queden estandarizadas al 100%.

Podéis ver el ejemplo final en el navegador (utilizar Chrome, safari, firefox u opera, no funciona con IE9)

Y el código fuente completo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Animación de texto con CSS3</title>
<style type="text/css">
body {
 font-family: Arial, Helvetica, sans-serif;
 text-align: center;
 font-weight: bold;
}
#r1 {
 position: relative;
 animation: botar 3s 250ms forwards normal;
 -webkit-animation:botar 3s 250ms forwards normal;
 -moz-animation:botar 3s 250ms forwards normal;
 -ms-animation:botar 3s 250ms forwards normal;
 -o-animation:botar 3s 250ms forwards normal;
}
#r2 {
 position: relative;
 animation: botar 3s 500ms forwards normal;
 -webkit-animation:botar 3s 500ms forwards normal;
 -moz-animation:botar 3s 500ms forwards normal;
 -ms-animation:botar 3s 500ms forwards normal;
 -o-animation:botar 3s 500ms forwards normal;
}
#r3 {
 position: relative;
 animation: botar 3s 2000ms forwards normal;
 -webkit-animation:botar 3s 2000ms forwards normal;
 -moz-animation:botar 3s 2000ms forwards normal;
 -ms-animation:botar 3s 2000ms forwards normal;
 -o-animation:botar 3s 2000ms forwards normal;
}
#r4 {
 position: relative;
 animation: botar 3s 1000ms forwards normal;
 -webkit-animation:botar 3s 1000ms forwards normal;
 -moz-animation:botar 3s 1000ms forwards normal;
 -ms-animation:botar 3s 1000ms forwards normal;
 -o-animation:botar 3s 1000ms forwards normal;
}
#r5 {
 position: relative;
 animation: botar 3s 750ms forwards normal;
 -webkit-animation:botar 3s 750ms forwards normal;
 -moz-animation:botar 3s 750ms forwards normal;
 -ms-animation:botar 3s 750ms forwards normal;
 -o-animation:botar 3s 750ms forwards normal;
}
#r6 {
 position: relative;
 animation: botar 3s 1500ms forwards normal;
 -webkit-animation:botar 3s 1500ms forwards normal;
 -moz-animation:botar 3s 1500ms forwards normal;
 -ms-animation:botar 3s 1500ms forwards normal;
 -o-animation:botar 3s 1500ms forwards normal;
}
#r7 {
 position: relative;
 position: relative;
 animation: botar 3s forwards normal;
 -webkit-animation:botar 3s forwards normal;
 -moz-animation:botar 3s forwards normal;
 -ms-animation:botar 3s forwards normal;
 -o-animation:botar 3s forwards normal;
}
@keyframes botar {
 0% {top:auto; animation-timing-function:ease-in;}
 30% {top:200px; animation-timing-function:ease-out;}
 45% {top:100px; animation-timing-function:ease-in;}
 60% {top:200px; animation-timing-function:ease-out;}
 68% {top:150px; animation-timing-function:ease-in;}
 76% {top:200px; animation-timing-function:ease-out;}
 80% {top:175px; animation-timing-function:ease-in;}
 84% {top:200px; animation-timing-function:ease-out;}
 86% {top:188px; animation-timing-function:ease-in;}
 88% {top:200px; animation-timing-function:ease-out;}
 87% {top:194px; animation-timing-function:ease-in;}
 88% {top:200px; animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-webkit-keyframes botar {
 0% {top:auto; -webkit-animation-timing-function:ease-in;}
 30% {top:200px; -webkit-animation-timing-function:ease-out;}
 45% {top:100px; -webkit-animation-timing-function:ease-in;}
 60% {top:200px; -webkit-animation-timing-function:ease-out;}
 68% {top:150px; -webkit-animation-timing-function:ease-in;}
 76% {top:200px; -webkit-animation-timing-function:ease-out;}
 80% {top:175px; -webkit-animation-timing-function:ease-in;}
 84% {top:200px; -webkit-animation-timing-function:ease-out;}
 86% {top:188px; -webkit-animation-timing-function:ease-in;}
 88% {top:200px; -webkit-animation-timing-function:ease-out;}
 87% {top:194px; -webkit-animation-timing-function:ease-in;}
 88% {top:200px; -webkit-animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-moz-keyframes botar {
 0% {top:auto; -moz-animation-timing-function:ease-in;}
 30% {top:200px; -moz-animation-timing-function:ease-out;}
 45% {top:100px; -moz-animation-timing-function:ease-in;}
 60% {top:200px; -moz-animation-timing-function:ease-out;}
 68% {top:150px; -moz-animation-timing-function:ease-in;}
 76% {top:200px; -moz-animation-timing-function:ease-out;}
 80% {top:175px; -moz-animation-timing-function:ease-in;}
 84% {top:200px; -moz-animation-timing-function:ease-out;}
 86% {top:188px; -moz-animation-timing-function:ease-in;}
 88% {top:200px; -moz-animation-timing-function:ease-out;}
 87% {top:194px; -moz-animation-timing-function:ease-in;}
 88% {top:200px; -moz-animation-timing-function:ease-out;}
 100% {top:200px;}
}
@-o-keyframes botar {
 0% {top:auto; -o-animation-timing-function:ease-in;}
 30% {top:200px; -o-animation-timing-function:ease-out;}
 45% {top:100px; -o-animation-timing-function:ease-in;}
 60% {top:200px; -o-animation-timing-function:ease-out;}
 68% {top:150px; -o-animation-timing-function:ease-in;}
 76% {top:200px; -o-animation-timing-function:ease-out;}
 80% {top:175px; -o-animation-timing-function:ease-in;}
 84% {top:200px; -o-animation-timing-function:ease-out;}
 86% {top:188px; -o-animation-timing-function:ease-in;}
 88% {top:200px; -o-animation-timing-function:ease-out;}
 87% {top:194px; -o-animation-timing-function:ease-in;}
 88% {top:200px; -o-animation-timing-function:ease-out;}
 100% {top:200px;}
}
</style>
</head>
<body>
<span id="r1">R</span>
<span id="r2">E</span>
<span id="r2">B</span>
<span id="r4">O</span>
<span id="r5">T</span>
<span id="r6">E</span>
<span id="r7">!</span>
</body>
</html>

Nos vemos en Nowe!

TE PUEDE INTERESAR

Seguridad informática. Una profesión con futuro.

Seguridad informática. Una profesión con futuro.

La seguridad informática o ciberseguridad es una de las profesiones con más futuro laboral, pero, ¿estamos preparados para el futuro? En tiempos de paz, quizás no nos debería preocupar la respuesta, pero el futuro ya está aquí y la Guerra 3.0 también. Algunos no saben...

Inspiración web #13

Inspiración web #13

La interfaz de usuario de voz (VUI en inglés) está cada vez más presente en nuestros dispositivos. Los dispositivos que incluyen pantallas, pero emplean la voz como método de entrada principal, señalan el camino hacia una experiencia de usuario holística más integrada...

Inspiración web #12

Inspiración web #12

Gráficos 3D animados y estáticos Hay muchas maneras de atraer usuarios a tu sitio web. En la misión de captar la atención del usuario y aumentar la duración promedio de la sesión, las técnicas modernas de diseño web juegan un papel clave. Una de ellas es usar...

Share This