diff --git a/NUXT/pages/index.vue b/NUXT/pages/index.vue index 5e1da36..a9f57aa 100644 --- a/NUXT/pages/index.vue +++ b/NUXT/pages/index.vue @@ -4,7 +4,7 @@ src="/icon.svg" width="10rem" height="10rem" - class="youspinmerightround" + class="intro" :class="$vuetify.theme.dark ? '' : 'invert'" />
@@ -74,14 +74,14 @@ export default { left: 50%; transform: translate(-50%, -80%); } -.youspinmerightround { +.intro { opacity: 0; transform: scale(0.5); transition-property: opacity, transform; - animation: likearecord 0.66s ease infinite alternate; + animation: bounce 0.66s ease infinite alternate; } /* triangles aren't very good at spinning :c */ -@keyframes likearecord { +@keyframes bounce { 0% { opacity: 0; transform: scale(0.5); @@ -91,4 +91,23 @@ export default { transform: scale(1); } } + +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* reduced-motion animations */ +@media (prefers-reduced-motion) { + .intro { + opacity: 0; + transform: scale(1); + transition-property: opacity, transform; + animation: fadein 0.5s ease 1 forwards; + } +}