Mapa Mental Transiciones CSS

Carlos Iñiguez. *Mapa Conceptual Transiciones CSS*

Una transición se especifica usando la propiedad transition, sin embargo es una buena práctica especificar cada una de los diferentes parámetros precedidos por el nombre de la propiedad.

En este apartado revisaremos las siguientes propiedades:

transition
transition-delay
transition-duration
transition-property
transition-timing-function

Revisa el mapa conceptual de la derecha que estructura cada una de estas propiedades.

Conocimiento previo: Curva Bezier

En CSS, la curva bezier está definida por 4 puntos: P0, P1, P2 y P3
Los puntos P0 y P3 están fijos en un plano de coordenadas y son el inicio y el fin de la curva. Es decir:
- P0 es la coordenada (0,0)
- P3 es la coordenada (1,1).
Los puntos P1 y P2 son móviles y actúan como radios en el plano de coordenadas. En efecto, la función bezier toma las coordenasa de estos dos puntos:

bezier ( P1_x, P1_y, P2_x, P2_y )

Curva Bezier puede recrear todos los movimientos: linear, ease, ease-in, ease-out, ease-in-out.
- Por ejemplo:
- ease ( lento el inicio , entonces rápido y termina lentamente) es equivalente a bezier (0.25, 0.1, 0.25, 1)
- linear (constante) => bezier (0,0,1,1)

Accede a la siguiente Web haciendo click aquí para practicar tus conocimientos sobre Curva Bezier.