etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

reduced motion preverence for intro animation

This commit is contained in:
Nikita Krupin 2022-03-31 10:20:42 -04:00
parent 1fc37f0912
commit 0a370a8f3b
1 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
NUXT/pages/index.vue
View File

@ -4,7 +4,7 @@
src="/icon.svg" src="/icon.svg"
width="10rem" width="10rem"
height="10rem" height="10rem"
class="youspinmerightround" class="intro"
:class="$vuetify.theme.dark ? '' : 'invert'" :class="$vuetify.theme.dark ? '' : 'invert'"
/> />
<div style="height: 5rem" /> <div style="height: 5rem" />
@ -74,14 +74,14 @@ export default {
left: 50%; left: 50%;
transform: translate(-50%, -80%); transform: translate(-50%, -80%);
} }
.youspinmerightround { .intro {
opacity: 0; opacity: 0;
transform: scale(0.5); transform: scale(0.5);
transition-property: opacity, transform; 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 */ /* triangles aren't very good at spinning :c */
@keyframes likearecord { @keyframes bounce {
0% { 0% {
opacity: 0; opacity: 0;
transform: scale(0.5); transform: scale(0.5);
@ -91,4 +91,23 @@ export default {
transform: scale(1); 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;
}
}
</style> </style>