Add animation

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

View file

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

View file

@ -321,3 +321,38 @@ i.tag {
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);
}
}