Sin movimiento no siempre prefiere el movimiento reducido trucos CSS

Hay un fragmento de código que veo todo el tiempo cuando los medios solicitan prefers-reduced-motion se habla. Aquí está:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Se trata de CSS, que intenta eliminar cualquier tráfico a un sitio web siempre que el usuario haya indicado una preferencia de tráfico reducido en las preferencias de accesibilidad de su sistema operativo.

Por qué prefers-reduced-motion preguntas

La razón por la que existe esta configuración es que el movimiento de la pantalla es un problema de accesibilidad. Aquí está Eric Bailey:

Trastornos vestibulares puede hacer que su sistema vestibular tenga dificultades para comprender lo que está sucediendo, lo que puede provocar pérdida del equilibrio y mareos, migrañas, náuseas y pérdida de la audición. Cualquiera que haya girado demasiado rápido está familiarizado con un sistema vestibular confuso.

Los trastornos vestibulares pueden ser causados ​​tanto por factores genéticos como ambientales. rango de condiciones que constituyen preocupaciones sobre la accesibilidad y afectan a más de 70 millones de personas.

Aquí está de nuevo en un artículo posterior:

Si tiene un trastorno vestibular o ciertos tipos de migrañas o convulsiones que provocan navegar por la web puede ser muy parecido a caminar por un campo minado - Estás constantemente a un clic de activar una animación no anunciada. Y es sólo para la navegación casual.

Movimiento reducido en comparación con el movimiento nuclear.

Sabiendo esto, puede ser grande la tentación de hacer un movimiento nuclear en el tráfico y borrarlo por completo cuando el usuario ha indicado una preferencia reducida por el tráfico. El problema con esto es, para citar a Eric nuevamente, "la animación no es superflua". ayuda accesibilidad. Por ejemplo, una "interfaz de transición" (como una lista que anima una apertura para que se deslice un nuevo elemento) puede ser muy útil:

La animación puede ser una gran herramienta para combatir algunas formas de deterioro cognitivo, utilizándola para desglosar conceptos complejos o para comunicar entre objetos aparentemente diferentes. El artículo de Val Head sobre Listar por separado enfatiza algunos otros beneficios muy bien investigadosincluyendo ayudar a aumentar la capacidad de resolución de problemas, recordar y adquirir habilidades, y reducir carga cognitiva y su susceptibilidad a cambio en la ceguera.

En este caso, perdería el movimiento contextual útil si solo lo disparara con un arma nuclear. Es posible que desee adoptar un enfoque diferente cuando esté en prefers-reduced-motion texto. Tal vez menos, más lento o eliminado movimiento mientras se apoya más en los colores y las transiciones de desvanecimiento.

Ban Nadel escribió recientemente "Aplique varias animaciones @keyframes para admitir las preferencias de CSS: tráfico reducido" y cubrió un ejemplo similar. La animación de entrada modal utiliza los efectos de atenuación y zoom de forma predeterminada. luego en prefers-reduced-motion El escenario usa atenuación pero no escala. El zoom provoca movimiento de una manera que no lo hace la atenuación.

/* 
  By default, we'll use the REDUCED MOTION version of the animation.
*/
@keyframes modal-enter {
  from {
    opacity: 0 ;
  }
  to {
    opacity: 1 ;
  }
}

/*
  Then, if the user has NO PREFERENCE for motion, we can OVERRIDE the
  animation definition to include both the motion and non-motion properties.
*/
@media ( prefers-reduced-motion: no-preference ) {
  @keyframes modal-enter {
    from {
      opacity: 0 ;
      transform: scale(0.7) ;
    }
    to {
      opacity: 1 ;
      transform: scale(1.0) ;
    }
  }
}

Ver la demostración de GIF en el sitio web de Ben si desea ver una comparación rápida.

Me gusta cómo es este estilo de enfoque. pensar en el problema y llegar a una solución con movimiento reducidoque joder todo, no hay periodo de movimiento!!

Pero no todos los movimientos están gestionados por CSS.

Ya que estamos en el tema de este fragmento de CSS con movimiento en espiral, tenga en cuenta que solo es efectivo para hacer lo que pretende hacer en sitios donde todo el tráfico está completamente administrado por CSSSi usa animaciones basadas en JavaScript, tenga en cuenta que este fragmento nuclear puede... bueno aquí está josh como:

Si sus animaciones se ejecutan completamente con CSS, esto funciona muy bien... Pero tuve algunos problemas extraños al ejecutar animaciones en JSEn particular, vi que este reinicio tiene el efecto contrario y hace animaciones. súper rápido y vertiginoso.

Así es: puede hacer exactamente lo contrario de lo que estás tratando de hacer.