Crear animaciones con CSS y JS en tu sitio

Introducción a las animaciones web

Las animaciones en la web son un recurso fundamental para mejorar la experiencia de usuario, guiar la atención y dotar de dinamismo a nuestro sitio. Con CSS y JavaScript podemos construir movimientos suaves, transiciones fluidas y efectos interactivos que refuercen la usabilidad y el diseño. En este artículo, desgranaremos desde los conceptos básicos hasta técnicas avanzadas, pasando por buenas prácticas de rendimiento y ejemplos prácticos.

1. Fundamentos de las animaciones CSS

1.1 Transiciones vs. Keyframes

Transiciones permiten animar cambios de propiedades en un elemento al ocurrir un evento (por ejemplo, :hover). Son sencillas de implementar pero limitadas a dos estados: inicio y fin.

Animaciones con @keyframes definen etapas intermedias, dando control completo sobre la secuencia de movimientos.

1.2 Propiedades principales

Propiedad	Descripción
transition-property	Determina qué propiedad(es) cambiarán.
transition-duration	Especifica la duración de la transición.
animation-name	Nombre de la animación definida en @keyframes.
animation-duration	Tiempo total de reproducción.
animation-timing-function	Función de aceleración (ease, linear, cubic-bezier, etc.).
animation-iteration-count	Número de veces que se repite (infinito, número).

1.3 Ejemplo práctico: un botón que crece al pasar el ratón

2. Animaciones avanzadas con @keyframes

2.1 Definición de keyframes

Utilizamos @keyframes nombreDeAnimación para indicar las etapas de la animación. Ejemplo de un rebote:

@keyframes rebote {
  0%   { transform: translateY(0) }
  25%  { transform: translateY(-20px) }
  50%  { transform: translateY(0) }
  75%  { transform: translateY(-10px) }
  100% { transform: translateY(0) }
}
  

Y lo aplicamos al elemento:

.elemento-rebote {
  animation-name:rebote
  animation-duration:1s
  animation-iteration-count:infinite
  animation-timing-function:ease-in-out
}
  

2.2 Control de relleno y dirección

• animation-fill-mode: mantiene el estado inicial o final fuera de la animación.
• animation-direction: alternar la dirección (normal, reverse, alternate).

3. Animaciones con JavaScript

3.1 requestAnimationFrame

Para animaciones que requieren sincronización al refresco de la pantalla, window.requestAnimationFrame(callback) es la API nativa más eficiente. Ejemplo:

let posY = 0
function moverElemento() {
  posY  = 2
  elemento.style.transform = translateY({posY}px)
  if (posY < 200) {
    window.requestAnimationFrame(moverElemento)
  }
}
moverElemento()
  

3.2 Bibliotecas especializadas

• Anime.js: sintaxis ligera para animaciones complejas.
• GSAP (GreenSock): rendimiento optimizado y gran comunidad.

4. Buenas prácticas y rendimiento

• Animar transform y opacity en lugar de propiedades que desencadenan reflow (width, height, margin).
• Hardware acceleration: fuerza la aceleración GPU con transform: translateZ(0) o will-change.
• Minimizar layers: demasiados elementos animados a la vez pueden saturar la GPU.
• Debounce y throttle en scroll o resize para no lanzar animaciones excesivas.

5. Accesibilidad y usabilidad

Recuerda permitir desactivar animaciones intensas para usuarios con sensibilidad a movimientos (prefers-reduced-motion en CSS). Ejemplo:

@media (prefers-reduced-motion: reduce) {
   {
    animation-duration: 0.001s !important
    transition-duration: 0.001s !important
  }
}
  

Conclusión

Dominar las animaciones en CSS y JavaScript potencia la interacción y la percepción de calidad de tu sitio web. Desde sencillas transiciones hasta secuencias complejas controladas por librerías, siempre ten en cuenta el rendimiento y la accesibilidad. Para profundizar, consulta la documentación de MDN Web Docs y las guías de W3C CSS Animations.