michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Prevent animations with prefers-reduced-motion (#7757)

Browse source 
* Prevent animations with prefers-reduced-motion

* Also disable animations in the fallback

* Change select to target elements
This commit is contained in:
Matthew Phillips 2023-07-21 16:10:48 -04:00 • committed by GitHub
parent 471324b0a3
commit c2d6cfd0c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/poor-cameras-tell.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Prevent animations when prefers-reduced-motion

12
packages/astro/components/viewtransitions.css
View file

@ -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;
}
}