1

Sobre la Propiedad Transition de CSS

Este tutorial pretende ser una ayuda para todos los estudiantes de Platzi que quieren aprender un poquito más sobre transition

Vamos con lo básico:
transition es una propiedad que en si misma defina otras cuatro propiedades más utilizadas para dar una transición a un elemento.
transition recibe: transition-propertytransition-durationtransition-timing-functiontransition-delay estas cuatro propiedades se define en una sola (transition).

Un ejemplo de lo anterior es:
.test {
transition: all .2s ease;
}

all --------------------> hace referencia a transition-property las estable todos los valores que le otorgaríamos como width…

Podemos especificar varias transiciones separando las por comas (,):
.box {
transition: background 1s ease,
opacity: 0.4 ease-in;
}

ASPECTOS IMPORTANTES A TENER EN CUENTA CON TRANSITION

  • Si queremos especificar un delay con la notación transition debemos tener en cuenta que el primer valor de tiempo siempre por defecto sera tomado como la duración de la transición (transition-duration). Entonces ¿Cómo ponemos un delay? agregamos un segundo parámetro expresado en segundos o mili segundos para el delay.
  • Un segundo aspecto a tener en cuenta es que no todas las propiedades pueden ser utilizadas en** transition-property**.

AHORA ENTENDAMOS LA PROPIEDAD TRANSITION-TIMING-FUNCTION

  • Se utiliza para definir una función que describe como se realizara una transition a lo largo de su duración. Permitiendo a una transición cambiar durante su duración la velocidad. Aquí los valores utilizados para esta propiedad son: ease,** ease-in**, ease-out,** ease-in-out**, step-start, step-end o una función cubic-bezier().

Usando steps():
Esta función permite especificar intervalos para la función timing. Toma uno o más parámetros, separados por coma. Un entero positivo para indicar los pasos y un segundo parámetro opcional start o end (de no incluirse este segundo parámetro adoptara end por defecto).
Ahora para terminar tenemos que tener en cuenta que start hace que los cambios se realicen al inicio de cada intervalo definido y end como indica al final de cada intervalo.

Escribe tu comentario
+ 2