Una animación con CSS es algo similar a una transisicón que se repite un número de veces y requiere de dos partes, establecer los intervalos y propiedades a modificar en @keyframes y la propiedad animation en cualquier etiqueta.
before es lo que está antes , after es lo que está después ... los …
Buenos Aires
Argentina
Nacido en el tercer mundo. Un santo varón. Buenos Aires. Los elefantes. Las golondrinas de Plaza de Mayo. Me chupo el dedo.
El tiempo es veloz. ¿No ves que ya no somos chiquitos? Despedida de la infancia. Todo es efímero. Juguetes perdidos. Dime quién me lo robó. Aprendizaje.
Soy un hippie. Rutas argentinas. Sobredosis de TV. Raros peinados nuevos. Más de cien mentiras. Delirium tremens.
Ciudad de pobres corazones. El karma de vivir al sur. Mundo de quimeras. Oh Dios, ¿Qué puedo hacer?
Cuando era más joven. Los mayores del mundo. Botas locas. Rejas electrificadas. Cerca de la revolución. Contra todos los males de este mundo. La casa desaparecida. Tumbas de la gloria. Vencedores vencidos. Carguen, apunten, fuego. Estás frito angelito. A lo mejor aún te acuerdas.
Ah, te vi entre las luces. Muchacha. Amor se llama el juego. Juego de seducción. Mi genio amor. Prométeme que nunca me dirás adiós. Pequeñas delicias de la vida conyugal. Toda la vida tiene música hoy. Es hora de levantare, querido (dormiste bien?).
Resumiendo.
Mi sueño de hoy. La sed verdadera. La búsqueda de la estrella. Todos juntos. ¡Ah! Basta de pensar.
Esto es to-to-todo amigos.
| CONTRAER ARCHIVOS |
|
12 comentarios:
Me encantó
Guau! no tenía ni idea de la diferencia entre 'transiciones' y 'animaciones', lo cual me descubre un mundo nuevo de locura de posibilidades con css... no sé si agradecértelo o odiarte por este descubrimiento, jejejeje! es broma! muchas gracias, me encanta tu blog!! un saludo!!
Los efectos son suaves y vistosos. Con las anteriores clases de gradientes y estas transiciones, se podría lograr una cosa de locos.
Gracias Maestro.
A jugar, Graciela
Alejandro:
Puede terminar siendo una locura, hay algunas animaciones muy complejas; vale la pena verlas y sin llegar a esos extremos, usar estas cosas de tanto en tanto
Adrián J. Messina:
Sí. Da para mucho y son efectos rápidos. Hay que intentarlo.
vaya, como ha mejorado css con el tiempo Gracias por esto
Lo hablamos algunas veces: 'usted está triste, usted está abrumadx por los problemas', juegue con la plantilla, déjese llevar'
Exactamente. Y para colmo, es más barato que un psiquiatra
Muy buen artículo me surge una curiosa duda..
Quiero que la animación con keyframes surga en el pseudo-clase :hover es decir cuando se coloque el mouse sobre ella.
Por ejemplo:
@keyframes animacion:hover {}
Lo que sucede es que no me funciona con la pseudo-clase.
Quiero saber si si es posible hacer eso o si no lo es.. gracias.
No sé exactamente cuál es tu idea pero, en general, keyframes define la animación :
@keyframes nombre { ....................... }
que aplicas a una etiqueta, clase o id; supongamos a la etiqueta P
p { ...... cualquier cosa}
y si quiero lanzarla con hover:
p:hover {
animation-name: nombre;
animation-duration: 1s;
}
animation es una propiedad que se coloca dentro de la regla.
No me refería a eso pero gracias por responder ya encontré la solución.
Lo que tenía que hacer es:
.algunelemento {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.algunelemento:hover {
animation-name: animacion;
}
@keyframes animacion {
0% {mi animacion principal}
100% {animacion final}
}
Como puedes notar coloque el nombre de la animación en mi clase con la pseudo-clase hover y esto hará que la animación solo funcione al pasar el mouse sobre el elemento.
Es lo que decía la respuesta
p:hover {
animation-name: nombre;
.............
}
Discúlpame tienes toda la razón muchas gracias y un saludo
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...