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-motion
porque 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 reduce
De 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 {
}
Deja una respuesta