Prevent animations with prefers-reduced-motion (#7757)
* Prevent animations with prefers-reduced-motion * Also disable animations in the fallback * Change select to target elements
This commit is contained in:
parent
471324b0a3
commit
c2d6cfd0c2
2 changed files with 17 additions and 0 deletions
5
.changeset/poor-cameras-tell.md
Normal file
5
.changeset/poor-cameras-tell.md
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'astro': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Prevent animations when prefers-reduced-motion
|
|
@ -42,3 +42,15 @@
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
::view-transition-group(*),
|
||||||
|
::view-transition-old(*),
|
||||||
|
::view-transition-new(*) {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-astro-transition-scope] {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Reference in a new issue