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)

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:

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

El mundo de la ilustración: Más allá de los dibujos.

Feb 23, 2024 | Artículos

El mundo de la ilustración: Más allá de los dibujos. El fascinante mundo de la ilustración es algo más que hacer dibujos. Se trata de una profesión artística con un altísimo componente creativo que se puede adaptar a muchas necesidades de comunicación de las empresas....

Ilustración al detalle. Kashe Gómez.

Sep 28, 2023 | Artículos

El poder de una ilustración al detalle Una ilustración bien hecha suele gustar a todos pero cuando miras detenidamente y descubres ciertos detalles, esa obra se queda en tu memoria. Tenemos un ejemplo claro en algunas de las ilustraciones que nos ha enseñado...

Toño Sépul. Constancia y esfuerzo para un trabajo bien hecho.

Sep 20, 2023 | Artículos

Antonio Foguet es Toño Sépul, un diseñador con mucha imaginación y una capacidad de trabajo que le hace ser muy eficaz en todos los proyectos en los que participa. Alumno del Certificado de Ilustración, ya realizó Diseño de Productos Gráficos en Nowe. Hoy hablamos con...

4 Comentarios

kira el 13 febrero, 2013 a las 7:45 pm

No te funciona..probado con firefox. Y en el Try it de w3schools.
Responder
- Javier Poyatos el 13 febrero, 2013 a las 7:55 pm
  
  Gracias Kira,
  échale un vistazo en chrome mientras reviso el código…
  Responder
- Gyovanny el 10 agosto, 2014 a las 11:43 pm
  
  Muchas gracias por el tutorial pero creo que cabe destacar que en chrome ba casi perfecto por alguna razon la primera letra no se animo(puede tener que ver con las modificaciones a las posiciones que hice… pero el resto funciona al 100 pero si ni en firefox ni en IE corre
  Responder
Hugo el 3 abril, 2014 a las 11:43 pm

Qué guay! Gracias por el tutorial. Queda muy bien!
Responder