examples - transition css hover

Diferencia entre las transiciones de CSS3 ''easy-in'' y ''ease-out''

Question

¿Cuál es la diferencia entre las transiciones de 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 su propio uso de cubic-bezier() .

• ease-in comenzará la animación lentamente y finalizará a toda velocidad.
• ease-out iniciará la animación a toda velocidad, luego terminará lentamente.
• ease-in-out comenzará lentamente, será más rápida en el medio de la animación y luego terminará lentamente.
• ease es como ease-in-out , excepto que comienza ligeramente más rápido de lo que termina.
• linear no utiliza relajación.
• Finalmente, aquí hay una gran descripción de la sintaxis de cubic-bezier , pero por lo general no es necesario a menos que desee algunos efectos muy precisos.

Básicamente, la relajación es detenerse lentamente, la aceleración es acelerar lentamente, y lo lineal no es hacer ninguna de las dos cosas. Puede encontrar recursos más detallados en la documentación para timing-function en MDN .

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

Otra, la función de sincronización de steps() , actúa como linear , pero solo realiza un número finito de pasos entre el principio y el final de la transición. steps() 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 de steps(8) y una transformación de rotate , estás usando el movimiento para producir la ilusión de cuadros separados! Que divertido.