JMiur [E]

Habíamos visto que las transiciones en CSS tienen cuatro propiedades que las controlan de manera individual:

transition-property la utilizamos para listar las propiedades que se cambiarán, separadas por comas; por ejemplo:
transition-property: background;
transition-property: background-color;
transition-property: background, width;
Ese lista no es obligatoria ya que, por defecto, el valor es all lo que significa que, salvo que lo indiquemos expresamente, la transición se hará sobre todas las propiedades que cambien. Por ejemplo, si tengo este DIV con un texto:
<div class="demoT">CSS3</div>

<style>
.demoT {
  /* todas las propiedades normales que quiera poner */
  background-color:#101921;
  border: 6px solid #89A;
  border-radius: 10px;
  color: #EEE;
  cursor: pointer;
  font-size: 16px;
  height: 50px;
  margin: 0 auto;
  padding-top: 20px;
  text-align: center;
  width: 100px;
  /* acá irá la transición */
}
.demoT:hover {
  /* estas son las propiedades que van a cambiar */
  background-color: #606971;
  border-radius: 150px;
  color: #000;
  font-size:64px;
  height: 200px;
  padding-top: 100px;
  width: 300px;
  /* acá irá la transición */
</style>
en lugar de agrega esto para animarlo un poco:
transition-property: background-color, border-radius; color, font-size, height, padding-top, width;
transition-duration: 2s;
puedo simplificarlo así:
transition-property: all;
transition-duration: 2s;
o utilizar una sóla línea, separando los valores con un espacio, de manera similar a lo que hacemos con otras propiedades:
transition: all 2s;
El orden es:
transition: transition-property, transition-duration transition-timing-function transition-delay;
Así que en ese ejemplo, sólo habría que agregar los prefijos de los distintos navegadores lo que daría esto:
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;

CSS3

Cuando queremos anular la transición lo que utilizamos es el valor none:
transition: none;
transition-duration es lo que indica la velocidad, o sea, el tiempo que durará la transición y por defecto es cero; al igual que la anterior, si ponemos varios valores, estos se separan con comas:
transition-duration: 1s;
transition-duration: 1s, 2s;
transition-timing-function es la más complicada de comprender; lo que hace es definir el modo en que se ejecutará esa transición; la curva de tiempo que se usa para calcular los diferente estados entre el inicio y el final. Por defecto, tiene el valor ease pero pueden usarse otros: linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Ese valor por defecto genera una animación suave; digamos que, comienza despacio y luego se va ascelerando. El valor linear lo hace de modo constante y usando cubic-bezier() podemos llegar a controlar esa velocidad de manera exacta aunque compleja. Pueden ver y experimentar esto en Ceaser, una herramienta online para probar valores y posibles alternativas. Mientras tanto, en este ejemplo, basta poner el cursor encima para ver como, aún utilizando en todos ellos el mismo valor de tiempo, el resultado final cambia haciendo que algunas se ejecuten más rápido que otras:

ease
linear
ease-in
ease-out
ease-in-out
cubic

Por último:

transition-delay determina el tiempo que transcurrirá antes de comenzar la transición y su valor inicial es cero.

Demasiada cosa, demasiado detalle pero todo es mucho más simple de lo que parece ya que, en realidad, para usos normales, basta saber que sólo necesitamos esto y nada más:
-moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s;
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

17 comentarios:

Memiliano  

Esto es increible. Ya con el anterior post se me caía la baba, pero esto se presta para cualquier cosa, las posibilidades son extraordinarias... Excelente!!

Excelentes los dos post. Por mi parte me encantaría que sigas enseñando algunas cosas de CSS3.

Por cierto, los ejemplos que pusiste de transition-timing-function no me funcionan en Chrome, pero funcionan perfecto en Firefox 4. Supongo que te faltó agregar el webkit. O tal vez algún error de tipeo... ;)

Saludos!!

Responder
JMiur  

Me pasa lo mismo, Memiliano; me parece fascinante así que seguiré molestando con el tema :D

Es verdad lo de Chrome, un error de tipeo que acabo de arreglar ... eso creo.

Responder
Echevarria  

Genial post, indispensable para la gente que hemos descubierto hace poco este mundillo

Responder
Karla  

:D Espectacular JMiur, Espectacular...

Responder
Graciela  

Maravilloso Jmiur!

Responder
Gem@  

Siga molestando JMiur siga, que nosotros disfrutamos con sus jueguitos :D

Responder
Manfenix  

Con molestias de este tipo, uno hasta pagaría por ser molestado!!! :)

Responder
m3nd3z  

Lo que más me gusta del CSS3 es que para hacer animaciones ya no necestas scripts externos :)

Algún día(espero) no necesitaremos Javascript o Flash para hace "mas interesante" el sitio =D

Responder
JMiur  

Echevarria:
Todo esto son juguetes nuevos así que todo es cosa de arriesgarse un poco y ver qué sale.

Karla, Graciela, Gem@
A ver cuando se animan :D

Manfenix:
Mientras no me cobren, disfruot molestado ... soy molestón :D

m3nd3z:
No sé si será tanto así pero sin duda simplificará muchas cosas o por lo menos, las hará accesibles a más personas cosa que siempre es deseable :D

Responder
oloman  

Muy, muy chulo. Al final me va a gustar y todo el CSS3. Y muy buenos los ejemplos J.Miur.

Responder
x-RiCaRdO-x  

que increible y yo creia que era script :) si coge en todos los browsers?

Responder
JMiur  

oloman:
No se me quede afuera de las modernidade, Don Oloman :D
Hablando en serio, son una herramienta extraordinaria y bastante fácil de usar.


x-RiCaRdO-x
Las transisiones no funcionan en IE aunque no estpy seguro si no lo hacen en IE9; Funcioann en Firefox 4, Opera, Chrome y Safari.

Responder
Pliactom  

Muy bonito ;)

Y sí, el explorer con sus detalles...

Responder
montanero123  

Como estas JMiur, te voy a molestar con otra duda; estoy haciendo un ensayo, para ejecutar transicion de color de fondo en una capa; he logrado que la capa cambie de fondo degradado, pero no logro que la propiedad duration actue; podrias asesorarme un poco? aca te pongo lo que tengo (no pongo los corchetes de hipertexto, porque no me deja publicar):

d i v class="prueba">ensayo</d i v
s t y l e
.prueba {
background:-webkit-linear-gradient(red, blue);
cursor:pointer;
-webkit-transition-property:background;
-webkit-transition-duration:3s;
}
.prueba:hover {
background:-webkit-radial-gradient(pink, yellow);
-webkit-transition-property:background;
-webkit-transition-duration:3s;
}
/s t y l e

desde ya mil gracias por tu respuesta.

JMiur  

Las transiciones no funcionan con las gradientes; por lo menos, no de ese modo.

montanero123  

...entiendo; pero, sabes de que otro modo?
gracias por responder tan pronto.

JMiur  

Con CSS no hay otro método; las gradientes son "como imágenes" y no son afectadas por las transiciones en si mismas, puedes intentar cambiando otras propiedades.

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