Diferencia entre las transiciones CSS3 de entrada y salida

Question

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

Answer 1

Las transiciones y animaciones de CSS3 admiten la aceleración, formalmente llamada "función de temporización". Los más comunes son ease-in, ease-out, ease-in-out, ease y linear, o puede especificar el suyo usando cubic-bezier().

• ease-in comenzará la animación lentamente y finalizará a toda velocidad.
• ease-out comenzará la animación a toda velocidad, luego termine lentamente.
• ease-in-out comenzará lentamente, será más rápido en el medio de la animación, luego termine lentamente.
• ease es como ease-in-out, excepto que comienza ligeramente más rápido de lo que termina.
• linear no utiliza la suavización.
• Finalmente, here's a great description de la sintaxis cubic-bezier, pero por lo general no es necesario a menos que desee algunos efectos muy precisos.

Básicamente, reducir la velocidad es detenerse lentamente, la aceleración es acelerar lentamente, y lineal no es hacer ninguna de las dos cosas. Puede encontrar recursos más detallados en el documentation for timing-function on MDN.

Y si desea los efectos precisos antes mencionados, la increíble Lea Verou cubic-bezier.com está a su disposición! También es útil para comparar las diferentes funciones de tiempo gráficamente.

Otro, the steps() timing function, actúa como linear, pero solo realiza un número finito de pasos entre el principio y el final de la transición. steps() me ha sido más útil en las animaciones de CSS3, en lugar de en las transiciones; un buen ejemplo es cargar indicadores con puntos. Tradicionalmente, uno usa una serie de imágenes estáticas (digamos ocho puntos, dos cambian de color en cada cuadro) para producir la ilusión de movimiento. Con una animación steps(8) y una transformación rotate, ¡estás usando el movimiento para producir la ilusión de marcos separados! Que divertido.