diff options
| author |  Matthew Phillips <matthew@skypack.dev>
| 2023-07-21 16:10:48 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2023-07-21 16:10:48 -0400 |
| commit | c2d6cfd0c26f4ebb81c715389347de1c3bf5f3e6 (patch) | |
| tree | cb4e483d1264d8fcd2c6279025cc02397b5e65c7 | |
| parent | 471324b0a3d4dd63641fb1192ddf0488637378ff (diff) | |
| download | astro-c2d6cfd0c26f4ebb81c715389347de1c3bf5f3e6.tar.gz astro-c2d6cfd0c26f4ebb81c715389347de1c3bf5f3e6.tar.zst astro-c2d6cfd0c26f4ebb81c715389347de1c3bf5f3e6.zip | |
Prevent animations with prefers-reduced-motion (#7757)
* Prevent animations with prefers-reduced-motion
* Also disable animations in the fallback
* Change select to target elements
| -rw-r--r-- | .changeset/poor-cameras-tell.md | 5 | ||||
| -rw-r--r-- | packages/astro/components/viewtransitions.css | 12 |
2 files changed, 17 insertions, 0 deletions
diff --git a/.changeset/poor-cameras-tell.md b/.changeset/poor-cameras-tell.md new file mode 100644 index 000000000..465bec41a --- /dev/null +++ b/.changeset/poor-cameras-tell.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Prevent animations when prefers-reduced-motion diff --git a/packages/astro/components/viewtransitions.css b/packages/astro/components/viewtransitions.css index 3b6733182..ffe554484 100644 --- a/packages/astro/components/viewtransitions.css +++ b/packages/astro/components/viewtransitions.css @@ -42,3 +42,15 @@ 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; + } +} |