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

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

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 (,):

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

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 ⁴/₅S 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:

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:

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

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: ⥣

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

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso