Transition
El efecto de esta propiedad es que permite visualizar los "fotogramas" que están involucrados en los cambios o modificaciones que sufren los estilos, de modo que se pueda apreciar el proceso de los cambios ocurridos en estos.
Una característica de las transiciones es que se pueden aplicar a cualquier cambio ocurrido en las propiedades de los elementos, pero para que se ejecute debe de accionarse un evento.
Nota: esta propiedad debe aplicarse en el estilo del elemento en el que surtirá efecto.
Propiedades obligatorias
Son aquellas propiedades sin las cuales las transiciones simplemente no funcionan, ya que estas definen aspectos esenciales de esta, por lo cual requiere que estas posean un valor:
Transition-property
-
El propósito de esta propiedad es definir a cuál propiedad se aplicará la transición, para esto se ingresa el nombre de dicha propiedad como valor de Transition-property de la siguiente manera.
Ejemplo
Una característica de esta propiedad es que acepta el valor "all", el cual le indica al navegador que a todos los cambios de todas las propiedades de la clase se les aplicará una transición; sin embargo, este valor no es muy recomendable ya que implica un gran consumo de recursos del dispositivo.
Otra posibilidad es definir más de una propiedad para que se le realice una transición a la vez, esto se puede lograr simplemente con ingresar el nombre de la segunda propiedad separado por una coma (,) del nombre de la primera.
Transition-duration
-
Esta propiedad define el tiempo que demorará la transición en completarse, por lo tanto los valores que acepta son segundos.
Ejemplo
Esta propiedad junto con transition-property son las que permiten que las transiciones funcionen en un elemento.
Al igual que transition-property, en esta propiedad se puede definir el tiempo de duración de más de una propiedad a la vez, simplemente se ingresa el segundo tiempo separado por una coma (,) del primero.
También se puede aplicar un mismo tiempo para más de una propiedad, para esto simplemente se ingresa un único tiempo en la propiedad, de ese modo este tiempo se generalizará y se aplicará a todas las propiedades.
Propiedades complementarias
Transition-delay
-
Esta propiedad configura un retraso en la ejecución de la transición, su función justamente es esa, demorar un poco el inicio de la transición; dicho "delay" se aplica tanto al ocurrir el cambio como al deshacerlo, es decir, el "delay" se aplicará al poner los nuevos estilos como al quitarlos.
Ejemplo
Transition-timing-function
-
Esta propiedad define la forma en la que se llevará a cabo la transición, simplemente modifica el ritmo en la que esta se ejecutará, es decir, dependiendo de su valor puede que el ritmo de la transición aumente o disminuya en algún punto de esta, sus valores posibles son:
-
Linear: La transición se desarrolla siempre a la misma velocidad.
-
Ease: La transición empieza rápido y su velocidad disminuye a medida que termina.
Nota: Este se trata del valor por defecto de la propiedad.
-
Ease-in: Este valor es el opuesto de ease, la transición empieza despacio y termina rápido.
-
Ease-out: Este valor se asemeja mucho a ease pero no llega a alcanzar tanta velocidad, acelera y frena más lentamente.
-
Ease-in-out: La transición empieza despacio, acelera y luego termina despacio.
Nota: Esta propiedad no modifica el tiempo de duración de la transición, eso es un rol exclusivo de la propiedad transition-duration.