Texto Rebote (html y/o css)

Vamos a ver un curioso efecto hover, y ya de paso explico el método de hacer animaciones lineales gracias a

css3. Ya veremos más adelante cómo lograr otro tipo de animaciones, pero por ahora con esta podremos ir

cogiendo la base para el resto.
El efecto consiste en una imagen, de la que al pasar el ratón por encima caiga un texto por la parte superior y

rebote varias veces antes de estabilizarse. En realidad no difiere mucho de otros efectos hover vistos hasta

ahora, más concretamente del efecto aparición texto con html5 (algún post anterior). Como siempre,

vamos a ver primero el código fuente html:
<div class="general">
<img src="../../../imagenes/iconos/html5_y_css3.png" />
<div class="mascara">
<p>Tutorial de: www.todocursosonline.es</p>
</div>
</div>

Seguimos entonces teniendo una capa general que es la que contendrá a las demás, aunque no vamos a darle

formato, es simplemente por organización. Lo siguiente que tenemos es una imagen, que es la que nos invitará

a pasar el ratón sobre ella para que así caiga el texto. Pero lo que de verdad interesa es lo siguiente, primero la

capa mascara:
.general .mascara {
top: -200px;
opacity: 0;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.general:hover .mascara {
opacity: 1;
top: 0px;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
-ms-transition-delay: 0s;
transition-delay: 0s;
-webkit-animation: bounceY 0.9s linear;
-moz-animation: bounceY 0.9s linear;
-ms-animation: bounceY 0.9s linear;
animation: bounceY 0.9s linear;
}

Explicamos brevemente lo que hemos hecho, que ya está explicado también en otros posts anteriores… La

hemos situado 200 pixels por encima de la imagen, para que al pasar el cursor sobre la imagen caiga hasta los

0 pixels de altura (donde tiene que estar). En principio será invisible con el opacity 0 (la capa y lo que ésta

contenga, el párrafo en este caso) para hacerse visible después con el opacity 1. Lo único que destaca aquí

es el animation: bounceY 0.9s linear, que ya veremos al final del post. Seguimos configurando o estilando el

texto (p):
.general p {
color: #333;
font-family:cursive;
font-weight:bold;
-webkit-transform: translateY(-200px);
-moz-transform: translateY(-200px);
-o-transform: translateY(-200px);
-ms-transform: translateY(-200px);
transform: translateY(-200px);
-webkit-transition: all 0.2s ease-in-out 0.2s;
-moz-transition: all 0.2s ease-in-out 0.2s;
-o-transition: all 0.2s ease-in-out 0.2s;
-ms-transition: all 0.2s ease-in-out 0.2s;
transition: all 0.2s ease-in-out 0.2s;
}
.general:hover p {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
transition-delay: 0.2s;
}

También sencillo, un color, un tipo de familia, un tipo de letra en negrita, 200 pixels por encima de la capa

(400 de la imagen), esto es porque es la capa mascara la que lleva el efecto en sí, por lo que es en esta capa

en la que tendrán que caer las letras una vez pasado el ratón, ya que como vemos ésto tarda en caer 0.2

segundos, mientras que la capa máscara cae inmediatamente. Ese va a ser el tiempo con el que vamos a jugar.
Ahora llegamos a la parte novedosa, tenemos que programar la animación para que rebote. Ésto lo haremos

de la siguiente manera:
@keyframes bounceY {
0% { transform: translateY(-205px);}
40% { transform: translateY(-100px);}
65% { transform: translateY(-52px);}
82% { transform: translateY(-25px);}
92% { transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
}
@-moz-keyframes bounceY {
0% { -moz-transform: translateY(-205px);}
40% { -moz-transform: translateY(-100px);}
65% { -moz-transform: translateY(-52px);}
82% { -moz-transform: translateY(-25px);}
92% { -moz-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);}
}
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
40% { -webkit-transform: translateY(-100px);}
65% { -webkit-transform: translateY(-52px);}
82% { -webkit-transform: translateY(-25px);}
92% { -webkit-transform: translateY(-12px);}
55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);}
}

Como vemos, empezamos diciéndole que en el 0% el texto esté en la parte superior de la capa, en el 40% de

la animación se desplace hasta la mitad, pero que en el 55% caiga abajo para que después en el 65% vuelva a

subir hasta un cuarto de la capa (50px), en el 75% caiga abajo y en el 82% suba desde 0px a 25, en el 87%

caiga y en el 92% vuelva a subir… hasta que en el 100% acaba abajo. Si no lo has entendido, vuelve a leerlo

más despacio.
Estos valores y porcentajes se pueden modificar a nuestro gusto de rebote, así por ejemplo si lo que queremos

es que rebote una vez y después quede en medio, bastaría con hacer algo como:
@-webkit-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
50% { -webkit-transform: translateY(-100px);}
75% { -webkit-transform: translateY(-0px);}
100% { -webkit-transform: translateY(-100px);}
}
@keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
50% { -webkit-transform: translateY(-100px);}
75% { -webkit-transform: translateY(-0px);}
100% { -webkit-transform: translateY(-100px);}
}
@-moz-keyframes bounceY {
0% { -webkit-transform: translateY(-205px);}
50% { -webkit-transform: translateY(-100px);}
75% { -webkit-transform: translateY(-0px);}
100% { -webkit-transform: translateY(-100px);}
}