@use "@styles/abstracts/functions" as fun;
@keyframes pulse {
from {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
to {
transform: scale(1);
}
}
@keyframes draw-borders {
0% {
background-position: top left, top right, bottom right, bottom left;
background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%,
0% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%;
}
25% {
background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%,
100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%;
}
50% {
background-size: 0% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%,
100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 100%;
}
75% {
background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 0%,
100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 100%;
}
100% {
background-position: top left, top right, bottom right, bottom left;
background-size: 100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 100%,
100% var(--draw-border-thickness, fun.convert-px(3)),
var(--draw-border-thickness, fun.convert-px(3)) 100%;
}
}
@keyframes slide-in-from-bottom {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes slide-in-from-top {
0% {
transform: translateY(-200%);
}
100% {
transform: translateY(0);
}
}
@keyframes flip-logo {
0%,
90% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes hide-text {
0%,
100% {
transform: translateX(0);
transform-origin: right;
content: "";
visibility: visible;
}
}
@keyframes typing {
0%,
35% {
transform: translateX(0);
transform-origin: right;
content: "|";
visibility: visible;
}
100% {
transform: translateX(100%);
transform-origin: right;
}
}
@keyframes blink {
0% {
color: var(--color-primary-darker);
}
100% {
color: var(--color-bg-tertiary);
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}