HTML5 - Efecto texto que rebota

Efecto hover animación html5: texto que bota

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 lograrotro 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 partesuperior 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 postanterior). Como
siempre, vamos a ver primero el código fuente html:



Tutorial de: www.todocursosonline.es


Seguimos entonces teniendo una capa general que es la que contendrá a las demás, aunqueno
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 deverdad
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 dela 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...