¿Para qué tipo de efectos visuales son más adecuadas las animaciones CSS?

Las animaciones CSS, gracias a su naturaleza declarativa y a las optimizaciones que pueden realizar los navegadores (especialmente para propiedades como transform y opacity), son una opción eficiente para:

1. Microinteracciones y estados de interfaz (UI):
   • Animar botones y otros controles al interactuar con ellos (efectos :hover, :focus, :active).
   • Transiciones suaves al mostrar/ocultar menús desplegables, acordeones o tooltips.
   • Indicadores de carga visuales como «spinners» (ruedas giratorias), barras de progreso simples, o efectos de pulsación.
   • Animaciones sutiles en notificaciones para atraer la atención.
2. Transformaciones y cambios de propiedades visuales:
   • Movimientos y traslados de elementos (transform: translateX(), translateY()).
   • Rotaciones de objetos (transform: rotate()).
   • Cambios de tamaño o escala (transform: scale()).
   • Efectos de aparición y desaparición gradual (opacity).
   • Cambios de color (como background-color, color, border-color).
3. Efectos en bucle o repetitivos:
   • Animaciones que se repiten indefinidamente (animation-iteration-count: infinite;) como parpadeos, efectos de «latido», gradientes animados sutiles, o pequeños movimientos de atención.
4. Animaciones de entrada y salida de elementos:
   • Hacer que los elementos aparezcan en la página con un efecto de deslizamiento, fundido o zoom al cargar la sección o como resultado de una interacción del usuario (a menudo, la animación se activa añadiendo una clase con JavaScript).
5. Efectos decorativos y de enfatización:
   • Pequeños toques visuales para mejorar la estética general, guiar la atención del usuario o añadir un poco de «vida» a la interfaz sin sobrecargarla.
   • Resaltar temporalmente un elemento importante.