JMiur [E]

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.

leer artículo actualizado

votar

12 comentarios:

Unknown  

Me encantó :D

Responder
Alejandro  

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!!

Responder
Adrián J. Messina  

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.

Responder
JMiur  

A jugar, Graciela :D

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.

Responder
Erick000  

vaya, como ha mejorado css con el tiempo Gracias por esto

Responder
Unknown  

Lo hablamos algunas veces: 'usted está triste, usted está abrumadx por los problemas', juegue con la plantilla, déjese llevar' :P

Responder
JMiur  

Exactamente. Y para colmo, es más barato que un psiquiatra :D

Responder
Carlos Germán  

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.

JMiur  

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.

Carlos Germán  

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.

JMiur  

Es lo que decía la respuesta :D

p:hover {
animation-name: nombre;
.............
}

Carlos Germán  

Discúlpame tienes toda la razón muchas gracias y un saludo :D

Responder

¿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 ...

Suscribirse a los comentarios
 
CERRAR