web/iswhoa
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Added reduce motion transitions

Browse source
This commit is contained in:
Leon Mika 2025-06-19 23:34:58 +02:00
parent d4b3322077
commit 64a2d4f9cb
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
public/style.css
View file

@ -112,6 +112,27 @@ input[type=radio] {
} }
} }
@keyframes fade-out {
from {
opacity: 100%;
}
to {
opacity: 0;
}
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 100%;
}
}
/* Apply the custom animation to the old and new page states */ /* Apply the custom animation to the old and new page states */
::view-transition-old(root) { ::view-transition-old(root) {
animation: 0.3s ease-in both move-out; animation: 0.3s ease-in both move-out;
@ -120,3 +141,13 @@ input[type=radio] {
::view-transition-new(root) { ::view-transition-new(root) {
animation: 0.3s ease-in both move-in; animation: 0.3s ease-in both move-in;
} }
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root) {
animation: 0.3s ease-in both fade-out;
}
::view-transition-new(root) {
animation: 0.3s ease-in both fade-in;
}
}