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"
width="10rem"
height="10rem"
class="youspinmerightround"
class="intro"
:class="$vuetify.theme.dark ? '' : 'invert'"
/>
<div style="height: 5rem" />
@ -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;
}
}
</style>