CSS con movimiento reducido
Detén una animación CSS decorativa cuando se solicite menos movimiento.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Proyecto
Comprueba ambas preferencias y el foco de teclado, conservando el texto de estado al desactivar el movimiento.
Revisa antes de aplicar
Compara el comportamiento real con el resultado esperado. Si una prueba falla, investiga la causa antes de hacer más cambios.
Modelos
Configura un endpoint compatible con OpenAI o Anthropic usando la URL base y, si hace falta, una clave API. Prueba la conexión. Un servidor local debe estar en ejecución; las herramientas remotas pueden enviar datos por separado.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Trata las preferencias de movimiento como parte de un cambio de interfaz
MotionHearth es un entorno de programación para Windows donde desarrollar cambios de interfaz con un modelo de IA conectado. Aporta la carpeta del proyecto y describe qué debe comunicar una interacción. La conversación puede seguir el componente junto con sus estilos, ayudándote a revisar una animación propuesta en el contexto del estado, foco o respuesta que debe transmitir.
Una tarea sugerida por motion.css es revisar una animación cuando se solicita movimiento reducido. Pregunta cómo comunica la interfaz existente la misma información una vez que se detiene el movimiento y si el foco del teclado sigue siendo visible. Esas preguntas convierten el ejemplo en un cambio de aplicación que puedes inspeccionar. También mantienen la solicitud más amplia que simplemente eliminar un fotograma clave y, al mismo tiempo, lo bastante pequeña para comprobarla en la pantalla real.
Puedes elegir un modelo de IA sin restricciones si tu endpoint compatible con OpenAI o de Anthropic admitido lo ofrece. Añade sus datos de conexión y las credenciales necesarias, teniendo en cuenta que las capacidades y restricciones pertenecen al modelo y al servidor. Revisa los cambios resultantes de CSS y componentes antes de probar la interfaz con movimiento habilitado y reducido. Usa navegación por teclado además de entrada con puntero. El objetivo es un comportamiento coherente con ambas preferencias, respaldado por lo que renderiza tu aplicación y no solo por la descripción del asistente.
Comprobación conjunta del movimiento y la interacción
¿Qué debe especificar una solicitud de movimiento reducido?
Nombra el elemento que se mueve, la información que transmite y el comportamiento alternativo esperado. Incluye el componente y la hoja de estilos pertinentes. Esto permite que el cambio propuesto conserve una respuesta útil en lugar de eliminar el movimiento sin considerar qué pierden los usuarios.
¿Puede una animación detenida ocultar el estado actual?
Sí, si el movimiento era la única indicación. Inspecciona el texto, la forma o el indicador de estado que quedan al deshabilitar la animación. Pide una alternativa que encaje en tu interfaz y verifica después que siga siendo clara durante toda la interacción.
¿Por qué probar el foco del teclado durante un cambio de movimiento?
Los estilos cercanos a un control animado también pueden afectar a su indicador de foco. Recorre la pantalla modificada con el teclado y confirma qué elemento está activo. Revisar solo los fotogramas clave no demuestra si la interacción completa sigue siendo comprensible.
¿Cuánto puede verificar el modelo a partir de archivos fuente?
Puede proponer una interpretación del código disponible dentro de su contexto y sus herramientas. Aun así, debes inspeccionar los estados renderizados y ejecutar las comprobaciones del proyecto. Trata las pantallas, estilos o condiciones de ejecución ausentes como límites de la revisión.
MotionHearth · Actualizado 2026-10-25