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/pages/index.vue | |
| parent | 85545af678e3f95aed4925ae95fd4a000cacdfe6 (diff) | |
prefers-reduced-motion a11y adjustment
Diffstat (limited to 'Website/pages/index.vue')
| -rw-r--r-- | Website/pages/index.vue | 13 |
1 files changed, 12 insertions, 1 deletions
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> |