Animaciones CSS: Guia Completa con Keyframes

Fundamentos de animacion CSS

CSS permite crear animaciones directamente en el navegador sin JavaScript. La regla keyframes define los estados intermedios de la animacion y la propiedad animation controla como se reproduce. Esta separacion entre definicion y aplicacion hace que las animaciones CSS sean modulares y reutilizables.

Una animacion basica necesita dos cosas: una regla keyframes que define al menos un estado inicial y un estado final, y una propiedad animation aplicada al elemento que especifica que keyframes usar, cuanto dura la animacion y como se comporta.

Las transiciones CSS son diferentes de las animaciones. Las transiciones reaccionan a cambios de estado como hover o focus y animan entre dos valores. Las animaciones pueden tener multiples pasos intermedios y ejecutarse automaticamente sin interaccion del usuario.

La propiedad animation en detalle

La propiedad abreviada animation acepta varios valores: nombre del keyframe, duracion, funcion de temporizado, retraso, numero de iteraciones, direccion, modo de relleno y estado de reproduccion.

La duracion determina cuanto tarda un ciclo completo de la animacion. Valores entre 200 y 500 milisegundos funcionan bien para microinteracciones. Animaciones mas largas de 1 a 3 segundos sirven para transiciones de pagina o efectos de carga.

Las funciones de temporizado controlan la aceleracion. Linear mantiene velocidad constante. Ease empieza lento, acelera y vuelve a frenar. Ease-in empieza lento y acelera. Ease-out empieza rapido y desacelera. La funcion cubic-bezier permite curvas personalizadas para comportamientos mas naturales.

El numero de iteraciones puede ser un numero entero o infinite para bucles continuos. El valor animation-direction con valor alternate hace que la animacion se reproduzca hacia delante y hacia atras alternadamente, lo que es util para efectos de respiracion o pulso.

Keyframes con multiples pasos

Los keyframes no estan limitados a un estado inicial y final. Puedes definir estados en cualquier porcentaje entre 0 y 100. Esto permite crear secuencias complejas como un elemento que rebota al caer, donde se mueve rapido al principio, decelera, rebota parcialmente y se asienta.

Al usar porcentajes, puedes controlar el ritmo de cada fase independientemente. Un estado al 0, 60 y 100 por ciento con la mayor parte del movimiento entre 0 y 60 crea un efecto donde la primera fase es rapida y la segunda mas lenta, incluso con una funcion de temporizado lineal.

Puedes animar casi cualquier propiedad CSS en keyframes, pero no todas ofrecen buen rendimiento. Transform y opacity son las propiedades mas eficientes porque el navegador las compone en la GPU sin provocar reflow ni repaint del documento.

Rendimiento y accesibilidad

Las animaciones que modifican propiedades de layout como width, height, margin o padding fuerzan al navegador a recalcular posiciones de todos los elementos afectados en cada frame. Esto consume CPU y puede provocar caidas de rendimiento perceptibles, especialmente en dispositivos moviles.

Usa transform para movimiento y cambio de tamano, y opacity para apariciones y desapariciones. Estas dos propiedades se animan de forma eficiente porque trabajan en la capa de composicion del navegador, separada del flujo del documento.

La media query prefers-reduced-motion permite respetar la preferencia del usuario de reducir las animaciones. Algunas personas sufren mareos o nauseas con las animaciones. Envolver tus animaciones en esta media query y ofrecer una alternativa estatica es una practica de accesibilidad importante.

Usar nuestro generador de animaciones

Nuestro Generador de Animaciones CSS ofrece una interfaz visual para disenar animaciones sin escribir keyframes manualmente. Ajusta propiedades, duracion y temporizado, ve el resultado en tiempo real y copia el codigo CSS generado.

La herramienta incluye presets para animaciones comunes como fade-in, slide, bounce, shake y spin. Puedes usar los presets como punto de partida y personalizarlos segun tus necesidades.