Diferencia entre la facilidad de entrada y la salida de las transiciones CSS3

¿Cuál es la diferencia entre las transiciones CSS3 ease-in, ease-outetc.?

Las transiciones y animaciones de CSS3 admiten la relajación, formalmente llamada "función de tiempo". Los más comunes son ease-in, ease-out, ease-in-out, ease, y linear, o bien puede especificar su propio uso cubic-bezier().

• ease-in comenzará la animación lentamente y terminará a toda velocidad.
• ease-out comenzará la animación a toda velocidad y luego terminará lentamente.
• ease-in-out comenzará lentamente, será más rápido en la mitad de la animación y luego terminará lentamente.
• easees como ease-in-out, excepto que comienza un poco más rápido de lo que termina.
• linear no usa alivio.
• Finalmente, aquí hay una excelente descripción de la cubic-beziersintaxis, pero generalmente no es necesaria a menos que desee algunos efectos muy precisos.

Básicamente, suavizar es reducir la velocidad hasta detenerse, disminuir es acelerar lentamente y lineal no hacer ninguna de las dos cosas. Puede encontrar recursos más detallados en la documentación de timing-functionMDN .

Y si quieres los efectos precisos antes mencionados, ¡el increíble cubic-bezier.com de Lea Verou está ahí para ti! También es útil para comparar gráficamente las diferentes funciones de temporización.

Otra, la steps()función de tiempo , actúa como linear, pero solo realiza un número finito de pasos entre el comienzo y el final de la transición. steps()me ha resultado más útil en animaciones CSS3, más que en transiciones; un buen ejemplo es la carga de indicadores con puntos. Tradicionalmente, se utiliza una serie de imágenes estáticas (digamos ocho puntos, dos de color cambiante en cada cuadro) para producir la ilusión de movimiento. Con una steps(8)animación y una rotatetransformación, ¡estás usando movimiento para producir la ilusión de cuadros separados! Que divertido.