diff --git a/public/style.css b/public/style.css index 59cd86c..59dae3f 100644 --- a/public/style.css +++ b/public/style.css @@ -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 */ ::view-transition-old(root) { animation: 0.3s ease-in both move-out; @@ -119,4 +140,14 @@ input[type=radio] { ::view-transition-new(root) { animation: 0.3s ease-in both move-in; -} \ No newline at end of file +} + +@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; + } +}