granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add animation

Browse source
This commit is contained in:
Justin Edmund 2023-01-22 19:51:29 -08:00
parent 7876f0d9a7
commit 69edb2c770
2 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Popover/index.scss
View file

@ -1,6 +1,8 @@
.Popover { .Popover {
animation: scaleIn $duration-zoom ease-out;
background: var(--dialog-bg); background: var(--dialog-bg);
border-radius: $card-corner; border-radius: $card-corner;
border: 0.5px solid rgba(0, 0, 0, 0.18); border: 0.5px solid rgba(0, 0, 0, 0.18);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
transform-origin: var(--radix-popover-content-transform-origin);
} }

35
styles/globals.scss
View file

@ -321,3 +321,38 @@ i.tag {
backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1); backdrop-filter: blur(5px) saturate(100%) brightness(80%) opacity(1);
} }
} }
@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0);
}
20% {
opacity: 0.2;
transform: scale(0.4);
}
40% {
opacity: 0.4;
transform: scale(0.8);
}
60% {
opacity: 0.6;
transform: scale(1);
}
70% {
opacity: 0.8;
transform: scale(1.1);
}
80% {
opacity: 0.8;
transform: scale(1);
}
90% {
opacity: 0.8;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}