diff options
| author | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-04 21:08:26 +0300 |
|---|---|---|
| committer | Nikita Krupin <krupin.nikita0110@gmail.com> | 2021-12-04 21:08:26 +0300 |
| commit | a69067b4c5c8b6a8387c2f267d68dc092cd2a3ef (patch) | |
| tree | 1347651fa85baa3aa37c6936674a87663526e94d /Website | |
| parent | 85545af678e3f95aed4925ae95fd4a000cacdfe6 (diff) | |
prefers-reduced-motion a11y adjustment
Diffstat (limited to 'Website')
| -rw-r--r-- | Website/layouts/default.vue | 45 | ||||
| -rw-r--r-- | Website/pages/index.vue | 13 |
2 files changed, 57 insertions, 1 deletions
diff --git a/Website/layouts/default.vue b/Website/layouts/default.vue index 1772176..2d10661 100644 --- a/Website/layouts/default.vue +++ b/Website/layouts/default.vue @@ -114,6 +114,51 @@ html, body { transform: scale(1) translateY(0); } } + +/* reduced-motion animations */ +@media (prefers-reduced-motion) { + .fly-in-from-top { + opacity: 1; + transform: none; + animation: none; + } + + .swoop-in-enter-active, + .swoop-in-leave-active, + .swoop-out-enter-active, + .swoop-out-leave-active, + .swoop-left-enter-active, + .swoop-left-leave-active, + .swoop-right-enter-active, + .swoop-right-leave-active { + transition-duration: 0.05s; + transition-property: opacity; + } + + .swoop-left-enter, + .swoop-right-leave-active { + opacity: 0; + transform: none; + } + + .swoop-left-leave-active, + .swoop-right-enter { + opacity: 0; + transform: none; + } + + .swoop-in-enter, + .swoop-out-leave-active { + opacity: 0; + transform: none; + } + + .swoop-in-leave-active, + .swoop-out-enter { + opacity: 0; + transform: none; + } +} </style> <script> diff --git a/Website/pages/index.vue b/Website/pages/index.vue index a1aaaca..356fe8b 100644 --- a/Website/pages/index.vue +++ b/Website/pages/index.vue @@ -31,18 +31,20 @@ <style scoped> #thumbslogo { opacity: 0; + transition-property: opacity, transform; transform: scale(0) rotate(180deg); animation: popin 1s 1s ease-in-out 1 forwards, thumbsflip 2s 3s ease-in-out infinite alternate; } @keyframes popin { 0% { - transform: rotate(180deg) scale(0.5); + transform: rotate(180deg) scale(0); opacity: 0; } 100% { transform: rotate(0deg) scale(1); opacity: 1; } } + @keyframes thumbsflip { 0% { transform: rotate(0deg) scale(1); @@ -52,6 +54,15 @@ transform: rotate(180deg) scale(.9); } } + +/* reduced-motion animations */ +@media (prefers-reduced-motion) { + #thumbslogo { + opacity: 1; + transform: none; + animation: none; + } +} </style> <script> |