Transitions Css3. Guia de aproximación y uso de las transiciones Css3

Por 7 Comentarios

El documento del W3c "Transitions Module Level 3 en español". Una guía explicativa de todas y cada una de las propiedades css que componen el grupo de las transitions con demos.

Archivado en —

Qué son las transitions Css3

Las transiciones de Css nivel 3 son un grupo de propiedades que permiten el cambio de un valor de una propiedad a otro valor de forma progresiva, no instantánea.
Podríamos decir que son un intermedio entre las @keyframes de Css3 y los cambios aplicados con las pseudoclases Css.
En las primeras hay pasos intermedios (frames) y en las segundas el cambio es instantáneo.

Propiedades de las transiciones Css3

El documento del W3C CSS Transitions Module Level 3 (Working Draft 01-12-09) y CSS Transitions (Editor's Draft 22-02-12) Actualizado CSS Transitions W3C Working Draft 3 Abril 2012 que las desarrolla define 4 propiedades más las acortada.
Puedes ver los cambios respecto del documento previo aquí.

transition-property:
Define las propiedades a modificar. Ver abajo la tabla de las aceptadas ⥥.
transition-duration:
El tiempo empleado en desarrollorse la transición.
transition-timing-function:
Cómo se desarrolla la transición en el tiempo.
transition-delay:
Retraso en iniciarse la transición.
Transition-property

Define las propiedades a las que se aplicará la transición. Si no defines unas propiedades explícitamente o utilizas la expresión all todas las propiedades susceptibles de cambiar lo harán.
Hay dos palabras comodines: all=todas cambiarán y none=ninguna lo hará.
Si lo que quieres es definir un grupo de propiedades la sintaxis es unas a continuación de otras separadas por comas (,):

transition-property: width, border-radius, font-size;

Si defines varias propiedades a modificar, puedes definir también varios valores en cada uno de los otros aspectos de transition.

Transition-duration

Para indicar cuánto tiempo llevará el cambio. Las unidades válidas son las de tiempo, segundos, minutos, milisegundos.... Valores negativos son inválidos, se computan como 0 (cero) y el 0 significa que no se produce transición. Si son varias las propiedades indicadas en T-property se pueden declarar un tiempo para cada una. Ver aclaración posterior ⥥.
Puedes ver una aplicación de lo más ingeniosa del tiempo de ejecución aquí: pseudoclases persistentes.

transition-duration: 1s, 300ms;
Transition-timing-function

Esta propiedad es la que determina cómo se desarrolla la transición en el tiempo estipulado. Los valores aceptados son que ves en las cajs de abajo y cada uno otorga un comportamiento diferente a la forma como se realiza la transición. Lo verás mejor con un sencillo ejemplo:

sin transición
linear
ease
ease-in
ease-out
ease-in-out
steps
steps(start)
steps(end)

Puedes ver los códigos css de éste y los siguientes ejemplos a través de "ver código fuente" de tu navegador. Estál al final del html.

En el ejemplo hay cambio en la anchura y el fondo. Como ves, Transition-timing-function indica cómo se produce el cambio a medida que transcurre el tiempo especificado en T-duration. Linear lo reparte uniformemente y en los "easy" se producen aceleraciones y desaceleraciones al inicio, intermedio, final o mezcladas:

steps la transición no es lineal sino a saltos. Su sintáxis es:
steps(Nº) donde Nº (un valor numérico) son los saltos que se producen en la transición. Similar a una no-transición con pasos intermedios.
steps(Nº, start) Indica el nº de saltos y que se realiza al inicio de cada fracción de tiempo. En el ejemplo, T-duration son 4s, los pasos 5, por lo tanto hay un salto cada 4/5S y se realiza al inicio de cada fracción de tiempo.
steps(Nº, end) Lo mismo que el anterior, pero la transición ocurre al final de cada fracción de tiempo. Es el valor por defecto para "steps".

Dicho de otra forma: "cuento 1, salto y espero; cuento 2 salto y espero;..." o al revés "salto, cuento 1 y espero; salto, cuento 2 y espero;..."

Además de estos, el W3c define también el valor cubic-bezier, que no es más que expresar los valores por pares numéricos para que la transición se realice describiendo una curva de Bézier. Para más información al respecto, consulta la documentación oficial que te enlazo, aunque en esta parte es concisa.

Transition-delay

El retardo o tiempo que trascurre entre la acción que desencadena la transición y el inicio de la misma. Esto es, el retraso con el que comienza la transición. No se resta del tiempo marcado a T-duration.
Admite valores de tiempo negativos, pero con una particularidad. Mira el ejemplo de abajo y te la explico:

sin delay
-1s delay
-2s delay
+1s delay
+2s delay
+3s delay
+4s delay

El valor negativo en T-delay actúa al contrario, adelanta la transición al punto que le correspondería estar al haber trascurrido dicho tiempo. Si tienes cambio de anchura de 0% al 100% en 4 segundos, el delay -2s fuerza a comenzar de inmediato la transición comenzando en el 50% de la anchura y con el 50% del tiempo de T-duration para completarla.

Experimenta también con el efecto que se produce si retiras el puntero antes de completarse la transición en función del punto en que se encuentre su desarrollo.

"Transition" la forma acortada o resumida

Estas propiedades también tienen una forma acortada o resumida (Shorthand) para declarar todas o algunas de ellas. La sintaxis es transition: property duration timing-function delay;

Si utilizas la forma acortada para declarar varias propiedades a cambiar y con igual o distintos parámetros en cada una de las transitions, con el orden anterior separados por comas (,) cada conjunto de ellas:

transition: color 3s linear 0s, width 1s ease 1s;

Soporte de los navegadores:

Consulta la página de caiuse para verificar el estado actual. Hoy por hoy es obligado el uso de los prefijos privativos.
Así que lo que sería algo sencillo (una línea), vuelve a ser tedioso y propenso a cometer cualquier error

#ejemplo > div.steps-end { -moz-transition: all 4s steps(4, end) 0s; -webkit-transition: all 4s steps(4, end) 0s; -o-transition: all 4s steps(4, end) 0s; -ms-transition: all 4s steps(4, end) 0s; transition: all 4s steps(4, end) 0s; }

A tener en cuenta y curiosidades:

⤥ Transition-duration es la única propiedad necesaria para que se produzca. Al declarar esta propiedad todo lo suceptible de cambiar lo hará.
⤥ Pese a que los pseudoelementos :before y :after las soportan Chrome tiene un problema con ellas y no las aplica
⤥ Si utilizas T-transitions individualmente y con valores múltiples en ellas tal que así: transition-property: color, width, background-color, left; transition-duration: 2s, 3s,; transition-delay: .5s, -1s, 1s, 1.5s; ⤥ se interpretará de la siguiente forma: color 2s .5s, width 3s -1s, background-color 4s 2s, left 3s 1.5s
⤥ Hay una propuesta para utilizar con los tiempos la forma 2s/1s siendo el primer valor t-duration y el segundo t-delay.
⤥ Y por supuesto que puedes utilizar las transition con las transform 2D y 3D.
⤥ Y por supuesto 2: si juegas con las @keyframes de Css puede meter en ellas las transitions que necesites. Por ejemplo.

Nota final y créditos:

Seguro que ya has utilizado más de una y de dos veces estas propiedades. Deja en los cometarios tus realizaciones o algún ejemplo de las que más te hayan llamado la atención. Pero ojo, las transition no son @keyframes aunque pueden formar parte de ellas.

Artículo en base a los documentos de la W3C que te enlazo al inicio.
La tabla de abajo copy/paste del mismo documento

Propiedades que admiten transiciones Css:

Propiedad Tipo de Valor
background-color color
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color This is a shorthand, so probably shouldn't be here. color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width This is a shorthand, so probably shouldn't be here. length
bottom length, percentage
clip rectangle
color color
crop This is not a standard property. rectangle
font-size length, percentage
font-weight number It's not that simple.
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom This is not a standard property. number

Sorpresa final

Un juego css, una pequeña modificación a un planteamiento de David Walsh, en su blog, comparando las transiciones css con jQuery y MooTools.
Si no lo ves, selecciona la pestaña "result".



Publicado el por y Archivado en —

Cartas al Editor [ 7 ]

El autor de artículo y el blog estaremos encantados de leer tu opinión, críticas, corrrecciones, matizaciones, ampliaciones o cualquier comentario que su lectura te sugiera. Y lo agradecemos... siempre que esté hecho con educación, buenas maneras y respeto.
Para publicar código envuélvelo con la etiqueta [code] [/code].
Para insertar Pens de @codepen mira esta guía.

  1. Anónimo10/11/12

    Creo que en el cuadro de código de "A tener en cuenta y curiosidades:" te falto algo..

    transition-duration: 2s, 3s,;

    ResponderEliminar
  2. Muchas gracias por el tutorial, aprovechare toda la nueva tecnologia que css3 nos da para hacer webs mas atractivas :)

    ResponderEliminar
  3. Excelente informacion!

    Muchas gracias por compartirla!

    ResponderEliminar
  4. En la parte "A tener en cuenta y curiosidades" creo que hay un error en

    se interpretará de la siguiente forma: color 2s .5s, width 3s -1s, background-color 4s 2s, left 3s 1.5s

    ResponderEliminar
  5. Lo que no llego a entender bien es, yo creo un hover verdad le doy algo de efecto de movimiento velocidad y demás... todo al pasar el mouse, pero al retirar el mouse esos efectos no se retiran suavemente, sino que se retiran muy brusco. como puedo controlar eso? es con ease-in-out?

    ResponderEliminar
    Respuestas
    1. Códigos, Remy, códigos.

      Voy a sacar la bola de adivino y a pensar que posíblemente estés declarando en la regla que contiene el elemento:hover { } en vez de la que aplica a elemento { }

      Y si no es eso, siempre puedes ver los códigos de los ejemplos con el inspector y compararlos con los tuyos.

      Un saludo

      Eliminar