Animaciones y microinteracciones en CSS fluidas y accesibles

Prompt

Actúa como desarrollador frontend especializado en motion design para la web, rendimiento de animaciones y accesibilidad.

Contexto:
- Qué quiero animar: {{elemento}}
- Sensación buscada: {{sensacion}}
- Tecnología: {{tecnologia}}
- Restricciones del proyecto: {{restricciones}}

Si la interacción no está clara (qué la dispara, cuánto dura, si se puede interrumpir), pregúntame antes de escribir código.

Entregables:
1. Especificación de movimiento en tabla: disparador, propiedades que cambian, duración, curva de easing, retardo y estado final, coherente con la sensación {{sensacion}}.
2. Variables CSS para duraciones y curvas, reutilizables en todo el proyecto.
3. El HTML y CSS (y el JavaScript mínimo si {{tecnologia}} lo requiere), animando solo transform y opacity siempre que sea posible.
4. Alternativa con prefers-reduced-motion: qué se elimina, qué se sustituye por un fundido simple y qué se mantiene porque aporta información.
5. Estados de foco visibles y comportamiento correcto con teclado si el elemento es interactivo; la animación nunca debe ocultar el foco ni retrasar la respuesta.
6. Notas de rendimiento: cuándo usar will-change y cuándo quitarlo, evitar animar propiedades que provocan relayout y cómo comprobarlo en el panel Performance.
7. Comportamiento en navegadores que no soporten alguna de las APIs usadas, para que el contenido siga siendo usable.

Restricciones:
- Nada de animaciones que parpadeen más de tres veces por segundo ni de movimiento que se active solo y no se pueda pausar si dura más de cinco segundos.
- Sin librerías externas salvo que {{tecnologia}} lo pida.
- El contenido debe ser visible y usable aunque la animación no llegue a ejecutarse.

Formato: tabla de especificación, código en bloques separados por archivo y una lista de pruebas.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

:root {
  --dur-rapida: 150ms;
  --dur-base: 300ms;
  --curva-salida: cubic-bezier(0.2, 0, 0, 1);
}

/* Solo se oculta si el JS ha cargado: sin JS, el contenido se ve igual */
.js .tarjeta-producto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--curva-salida), transform var(--dur-base) var(--curva-salida);
}
.js .tarjeta-producto.es-visible { opacity: 1; transform: none; }

.boton-carrito { transition: transform var(--dur-rapida) var(--curva-salida); }
.boton-carrito:active { transform: scale(0.97); }
.boton-carrito:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.boton-carrito[data-estado="anadido"] .icono-check { animation: aparecer var(--dur-base) var(--curva-salida); }

@keyframes aparecer { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .tarjeta-producto { transform: none; transition: opacity var(--dur-rapida) linear; }
  .boton-carrito, .boton-carrito[data-estado="anadido"] .icono-check { transition: none; animation: none; }
}

Datos clave

Categoría

Programación y desarrollo · HTML y CSS

Tipo de resultado

Código

Nivel

Intermedio

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Qué quiero animar, Sensación buscada, Tecnología y Restricciones

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes