Línea de tiempo CSS de vista previa de movimiento trucos CSS

Déjame hacer esto en un estilo de choque:

Línea de tiempo de desplazamiento CSS con prefers-reduced-motion

Lo único que agregaría es algo memorable. prefers-reduced-motionporque veo que este movimiento de balanceo afecta a las personas con mareos. Para hacer esto, puede combinar las pruebas en el mismo orden que las pruebas de soporte de JavaScript:

if (
    !CSS.supports("animation-timeline: foo") && 
    !window.matchMedia('(prefers-reduced-motion: reduce)').matches
   ) {
     // Do fancy stuff
}

No estoy 100% seguro si es mejor probar no-preference o viceversa reduceDe cualquier manera, el truco en CSS es empaquetar todo lo que usa @scroll-timeline y animation-timeline en @supports prueba (si quieres hacer algo diferente) entonces envolverlo En la prueba de preferencia:

@media (prefers-reduced-motion: no-preference) {

    @supports (animation-timeline: works) {

      /* Do fancy stuff */

    }

}

Aquí hay una demostracióntodo el mérito es del éxito de Brahmus.

¿Sabes qué? CSS mejora como debería @when Características del terreno:

@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) {

} @else {

}