🥇 ▷ Transición CSS [Timing Function & Delay]

Esta es la parte 2 de la guía completa de transiciones CSS. ¡En esta publicación, aprenderá las habilidades Jedi avanzadas de la función de sincronización de transición CSS y el retraso de transición!

Si se perdió la parte 1, haga clic aquí para obtener información sobre la duración de la transición y la propiedad de transición de CSS.

CSS Transición-tiempo-función

Aquí es donde las cosas se ponen realmente geniales.

Mientras que la duración de la transición controla cuánto tiempo se tarda en pasar de un estado al siguiente, la función de temporización de la transición controla la velocidad de la transición dentro de ese tiempo.

Por ejemplo, si está moviendo una caja de un lado a otro de la pantalla, ¿quiere que se mueva a un ritmo constante? ¿O desea que se mueva rápidamente al principio, pero luego disminuya la velocidad a medida que se acomoda en su posición final?

Eso es lo que la función de tiempo de transición de CSS puede hacer por usted. Hay cinco opciones preestablecidas de uso común:

lineal: La transición ocurre a una velocidad constante.
Facilidad: comienza rápido, pero se ralentiza justo antes del final. Este es el valor predeterminado.
Facilidad de entrada: Comience despacio y aumente gradualmente la velocidad.
Facilidad de salida: comienza rápido, pero se ralentiza pronto.
Facilidad de entrada y salida: comienza lento, se ralentiza temprano, pero rápido en la sección media.

Esto es más fácil de entender visualmente: desplace el cursor sobre la imagen a continuación para activar el movimiento de las cajas:

ver la pluma
en CódigoPen.

Como puedes ver, todos llegan a la meta al mismo tiempo, pero se mueven a diferentes velocidades a lo largo del camino.

Para hacer esto, coloqué absolutamente cada cuadro, le di a cada uno una clase única y luego usé esa clase para establecer la transición en la propiedad de la izquierda:

.linear {
transition: left 2s linear;
}.ease {
transition: left 2s ease;
}
.ease-in {
transition: left 2s ease-in;
}



	
  



	
  



.ease-out {
transition: left 2s ease-out;
}
.ease-in-out {
transition: left 2s ease-in-out;
}

Como discutimos en la parte 1, Duración y propiedad de transición de CSS, puede asignar estos tres valores por separado, por ejemplo, podría usar esto:

.ease-in-out {
transition-property: left;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}

Sin embargo, se encontrará con los mismos problemas relacionados con la legibilidad y la capacidad de mantenimiento de los que hablamos antes, por lo que es mejor configurarlos todos juntos con la transición.

Configuración de funciones de temporización personalizadas con cubic-bezier()

Para la mayoría de las situaciones, estos cinco valores predeterminados de función de tiempo de transición de CSS probablemente lo cubrirán.

Sin embargo, si es necesario, puede personalizar la aceleración y desaceleración de su transición utilizando la función cubic-bezier().

Un Bézier cúbico es un tipo de curva, llamado así por el ingeniero francés Pierre Bézier, quien lo utilizó para crear las curvas de los automóviles Renault en la década de 1960. La función toma cuatro argumentos y, a partir de ellos, calcula una curva que determina el momento de la transición.

OK, eso es un bocado!

Que significa todo esto? Bueno, primero pensemos en el tiempo lineal. Si trazas eso en un gráfico, se vería así:

El tiempo que toma la transición está a lo largo del eje x, y el progreso de la transición (por ejemplo, cuánto se mueve la caja) está arriba del eje y. Vemos una línea recta con lineal, porque la transición ocurre a un ritmo constante.

Ahora veamos otro, tranquilízate:

Como puede ver aquí, la mayor parte del progreso de una transición suave ocurre bastante temprano. A la mitad de la duración, el 80% de la animación ya se ha completado. El 20% final de la animación toma la misma cantidad de tiempo, lo que da ese efecto de desaceleración.

Cada uno de los cinco tiempos de transición ‘preestablecidos’ tiene su propia curva, y puede volver a crearlos usando cubic-bezier() si realmente lo desea:

lineal = cubic-bezier(0.0, 0.0, 1.0, 1.0)
facilidad = cubic-bezier(0.25, 0.1, 0.25, 1.0)
facilidad de entrada = cubic-bezier (0.42, 0, 1.0, 1.0)
facilidad de salida = cubic-bezier (0, 0, 0.58, 1.0)
entrada-salida = cubic-bezier(0.42, 0, 0.58, 1.0)

Y, por supuesto, ¡eres completamente libre de crear tu propia curva! Lea Verou tiene una excelente herramienta cúbica bezier con el que puedes jugar.

Diré una cosa más sobre esto antes de continuar: en general, y especialmente con el movimiento, querrá evitar el movimiento lineal.

En el mundo real que nos rodea, los objetos rara vez se mueven a una velocidad lineal constante: aceleran y desaceleran. Y no es solo el movimiento, incluso la cantidad de luz del día que recibimos por día no cambia a un ritmo lineal a lo largo del año.

Si replicamos eso en nuestras transiciones, se sentirán más naturales.

Transiciones CSS con pasos ()

Cada una de las opciones anteriores crea una transición suave y agradable de un estado al siguiente. Pero, ¿y si no quieres una transición suave? ¿Qué sucede si desea cambiar de estado en varias etapas distintas? Bueno, la función de tiempo de transición de CSS tiene una función de pasos () que puede hacer exactamente eso:

  transition-timing-function: steps(10);

Nuevamente, puede combinar esto en la propiedad de transición:

  transition: left 2s steps(10);

Aquí estamos transicionando la propiedad izquierda, estableciendo una duración de transición de 2 segundos, y queremos que suceda en 10 etapas discretas en lugar de un movimiento suave.

El bolígrafo a continuación muestra cómo se ven algunos valores de pasos diferentes () en acción, y he puesto una función de tiempo lineal en la parte superior para comparar:

ver la pluma
en CódigoPen.

Tenga en cuenta que todos los valores de función de tiempo de transición de CSS técnicamente usan pasos. Es solo que cuando usamos la facilidad o una de las otras opciones, el navegador está usando tantos pasos que parece suave para el ojo humano. Si usa un valor realmente alto con pasos, como pasos (240), debería ser indistinguible de la versión lineal.

Pasos de CSS: ¿necesita un buen comienzo?

Quizás esté pensando, si la transición toma cinco pasos, ¿eso incluye el punto de partida? Por ejemplo, si usamos los pasos (5), ¿la posición inicial del elemento está incluida en esos 5 pasos? ¿O hace 5 pasos desde ese punto?

De hecho, ¿está incluido el estado final? ¿O significa que hay 5 pasos intermedios entre el estado inicial y el estado final?

Esto es algo que puede elegir usted mismo, pasando un segundo argumento, un término de salto, a steps(), junto con el número de pasos. Tiene algunas opciones aquí (cada uno de estos ejemplos asume que desea 5 pasos):

jump-start: El elemento hará cinco pasos desde el estado inicial hasta el estado final. Así que habrá 6 etapas en total. Tan pronto como comience la transición, el elemento saltará inmediatamente al primer paso: ¡un comienzo rápido!
jump-end: el elemento realizará exactamente los mismos pasos que jump-start, pero llegará a la etapa final exactamente cuando termine la transición. Esto es un poco como una entrada lenta: se sentirá como un comienzo lento. Esta es la configuración predeterminada.
jump-none: El estado inicial y el estado final están incluidos en los 5 pasos. Entonces habrá 3 pasos intermedios, entre ellos, y el elemento técnicamente hará 4 cambios en total.
jump-both: El estado inicial y el estado final no están incluidos en los 5 pasos. Entonces habrá 5 pasos intermedios entre ellos, y el elemento técnicamente hará 6 cambios en total.

(Tenga en cuenta que también puede usar start en lugar de jump-start y end en lugar de jump-end).

¡Veamos cómo quedan estos! Usando los mismos cuadros que arriba, agregué una clase diferente a cada cuadro y apliqué un término de salto diferente a cada uno, solicitando 5 pasos cada vez:

.no-jump-setting {
transition: left 2s steps(5);
}.jump-start {
transition: left 2s steps(5, jump-start);
}



	
  



	
  



.jump-end {
transition: left 2s steps(5, jump-end);
}
.jump-none {
transition: left 2s steps(5, jump-none);
}
.jump-both {
transition: left 2s steps(5, jump-both);
}

Y aquí está el resultado:

ver la pluma
en CódigoPen.

¡No se trata solo de movimiento!

He usado cuadros móviles en todos los ejemplos aquí, porque eso hace que sea más fácil ver lo que realmente están haciendo los diferentes valores.

Pero recuerde que estos ajustes de función de tiempo de transición se aplican a todas las transiciones. Así es como afectan las transiciones de cambio de color, por ejemplo:

ver la pluma
en CódigoPen.

CSS transición-retraso

La propiedad de transición final es el retraso de transición de CSS. Como su nombre lo indica, esto le permite establecer un retraso entre el momento en que se activa la transición y el comienzo real de la animación.

Lo usas así:

transition-delay: 1s;

Para combinarlo con todo lo demás en transición, solo agrega el retraso al final:

  transition: left 2s ease 1s;

Pase el cursor sobre las casillas para ver algunos retrasos diferentes:

ver la pluma
en CódigoPen.

Tenga en cuenta que el tiempo de retraso no está incluido en la duración de la transición. Por lo tanto, una transición con una duración de 2 s y un retraso de 1 s tardará 3 s en total.

Otra cosa a tener en cuenta: intente pasar el cursor sobre las casillas, pero luego aleje el mouse antes de que lleguen a la línea de meta. Verá que el retraso también se aplica cuando la transición se invierte.

Accesibilidad con transiciones y animaciones

Si bien a muchas personas les encantarán todas las increíbles animaciones que vas a crear, muchas otras preferirían prescindir de ellas. De hecho, el movimiento en pantalla puede causar enfermedades e incluso convulsiones en algunas personas.

Pero es posible que haya notado que las animaciones ahora están en toda la web. Entonces, ¿qué hace esta gente? ¿Simplemente no usan Internet?

No, lo hacen, pero cambian una configuración en su sistema operativo para indicar que preferirían un movimiento reducido. Los navegadores detectan esta configuración y la pasan a su sitio. Luego puede detectar cuál es su preferencia y usar una consulta de medios de movimiento reducido preferido para desactivar sus transiciones:

@media (prefers-reduced-motion: reduce) {
.box {
transition: none;
}
}

Simplemente puede enumerar todos los elementos con transiciones en esta consulta y establecer la transición en ninguno como se ve arriba. Sin embargo, para estar seguro, puede abordar esto desde el ángulo opuesto:

@media (prefers-reduced-motion: no-preference) {
.box {
transition: background 2s ease-in-out 1s;
}
}

El valor sin preferencia es el predeterminado para movimiento reducido preferido. Entonces, si coloca todas sus transiciones en esta consulta, su sitio activará las transiciones a menos que se le indique que no lo haga. Es una opción más segura, en caso de que usted o sus colegas olviden desactivar una transición en la consulta de reducción.

¿Qué vas a crear?

¡Felicidades! Ahora tiene las herramientas para crear todo tipo de transiciones para su sitio web. Una vez que te familiarices con esto, te sorprenderá lo que puedes crear.

Si desea algo de inspiración, para ver lo que es realmente posible, eche un vistazo a fullPage.js. fullPage le permite crear hermosos sitios de página completa que responden completamente y que funcionan sin problemas y brindan una experiencia increíble para sus visitantes.

Consulte estos ejemplos de página completa para ver las diferentes transiciones, animaciones y efectos que puede aplicar a su propio sitio. Hay diferentes efectos de desplazamiento, fundidos, efectos de paralaje y una variedad de controles deslizantes diferentes. ¡Darle una oportunidad!