Fundamentos de Animaciones CSS
Las animaciones CSS usan reglas @keyframes para definir las etapas de una animacion y la propiedad abreviada animation para aplicarlas. Los keyframes especifican que estilos debe tener el elemento en puntos dados durante la secuencia. La propiedad animation vincula los keyframes a un elemento y controla duracion, temporizacion, retraso, repeticion, direccion y comportamiento de relleno.
Elegir la Funcion de Temporizacion Correcta
Las funciones de temporizacion determinan la curva de aceleracion de una animacion. Linear crea velocidad constante; ease comienza lento, acelera y luego desacelera; ease-in comienza lento; ease-out desacelera al final; ease-in-out combina ambos. La eleccion correcta depende del contexto; las animaciones de entrada suelen beneficiarse de ease-out mientras que las de salida funcionan bien con ease-in.
Consideraciones de Rendimiento
Las animaciones que cambian transform y opacity son aceleradas por hardware y tienen mejor rendimiento. Animar propiedades de diseno como width, height o margin provoca reflows costosos. Usa transforms para movimiento, escalado y rotacion. Usa will-change con moderacion para sugerir al navegador animaciones proximas sin sobre-asignar memoria GPU.
Accesibilidad y Movimiento Reducido
Siempre respeta la consulta de medios prefers-reduced-motion. Los usuarios que experimentan mareo por movimiento o tienen trastornos vestibulares pueden activar movimiento reducido en su sistema operativo. Envuelve tus animaciones en una consulta @media (prefers-reduced-motion: no-preference) o proporciona una alternativa mas simple.
