JMiur [E]

Las transiciones en CSS son la forma de cambiar una o varias propiedades de una etiqueta de tal modo de pasar de un valor original a otro diferente, con un efecto tal que ese cambio no se realiza de manera instantánea sino que demora un cierto tiempo y por lo tanto, parece estar animado.

Lo más simple para ver esto es un ejemplo donde cambiamos el ancho: de un rectángulo; normalmente, podríamos hacer algo así:
<style>
.rectangulo { border: 1px solid #444; margin: 0 auto; height: 100px; }
.rectangulo :hover {width: 450px;}
</style>

<div class="rectangulo"> </div>

Al poner el cursor encima del rectángulo, este se amplia porque cambiamos el valor de width.

Para animarlo con una transición, hacemos lo mismo y agregamos la propiedad transition con los prefijos que por ahora, sigue necesitando para que sea comprendida por los distintos navegadores:
.rectangulo {
  .......
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}

El resultado, será el mismo excepto que el cambio, se realizará "lentamente" provocando ese efecto de animación.

Lo mismo podemos hacer con casi cualquier otra propiedad o con varias propiedades simultáneamente:
.rectangulo1 {
  background-color:#000;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
.rectangulo1:hover {
  background-color:#F00;
}
.rectangulo2 {
  background-color: #000;
  background-image: url(UNA_IMAGEN);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
.rectangulo2:hover {
    background-color: #FFF;
    background-position: right 50%;
    background-size: 100px 100px;
}

Una animación con CSS es algo muy similar ... pero distinto que requiere de dos partes, primero, establecer los datos de esa animación y luego, agregar las propiedades correspondientes en la etiqueta.

Para crear una animación se utiliza @keyframes que, como todas estas nuevas propiedades en desarrollo, requiere que se le adicione un prefijo para cada navegador:
@-moz-keyframes en Firefox
@-webkit-keyframes en Chrome/Safari
@-ms-keyframes en IE10
La sintaxis básica sería:
@keyframes NOMBRE {
  from { ... }
  to  { ... }
}
donde NOMBRE es cualquiera que se nos ocurra y es con lo que la identificaremos luego y debería ser un nombre único para cada una de ellas; from y to contendrán las propiedades iniciales y finales de esa animación; por ejemplo esto crearía una animación que cambie un color de fondo de negro a rojo:
@keyframes recrojo1 {
  from {
    background-color:#000;
  } 
  to {
    background-color:#F00;
  }
}
y esta otra sería igual pero también cambiaría el borde:
@keyframes recrojo2 {
  from {
    background-color:#000;
    border: 0px solid #444;
  } 
  to {
    background-color:#F00;
    border: 15px solid #FF0;
  }
}
Claro que así, tal como está, no pasa nada. Para agregarla a una etiqueta, debemos usar la propiedad animation que tiene varios parámetros, algunos obligatorios y otros optativos:

animation-name es el nombre del keyframe que usaremos
animation-duration es el tiempo que durará esa animación
animation-iteration-count es la cantidad de veces que se ejecutará (por defecto1) y si usamos infinit se repitirá indefinidamente
animation-direction indica si la animación se repetirá de modo normal (desde-hasta desde-hasta ...) o alternará (desde-hasta hasta-desde ...)

Hay otras y se van agregando más y más a medida que los distintos navegadores experimentan con esta cosas pero, con esas es más que suficiente para comenzar a jugar y no volvernos demasiado locos ya que, como todas las otras también requieren el prefijo -moz -webkit o -ms.

Vamos al ejemplo del rectángulo anterior:
@-moz-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* Firefox */
@-webkit-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* Chrome */
@-ms-keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* IE10 */
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;} } /* w3org */

.rectanguloanimado {
  -moz-animation: recrojo 1s infinite alternate; /* Firefox */
  -webkit-animation: recrojo 1s infinite alternate; /* Chrome */
  -ms-animation: recrojo 1s infinite alternate; /* IE10 */
  animation: recrojo 1s infinite alternate; /* w3org */
}
uso esa forma resumida, al igual que puede hacerse con otras propiedades, para ahorra espacio y no tener que escribir:
animation-name: recrojo;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
con todos sus prefijos, lo cuál, a veces es inevitable.


Como se ve, puesta de ese modo, la animación es permanente y puede ser todo lo compleja que se quiera aunque también es posible colocarla en el evento hover y de esa manera, sólo es lanzada cuando colocamos el cursor encima. Sería similar a las transiciones sólo que podemos repetir el efecto indefinidamente siempre que mantengamos el cursor encima:


12 comentarios:

Graciela  

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
EACTfull  

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

Responder
Graciela  

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  

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  

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  

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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

 
CERRAR