106 lines
1.9 KiB
CSS
106 lines
1.9 KiB
CSS
@layer utility {
|
|
.animate-fade-in-down {
|
|
animation: var(--animate-fade-in-down);
|
|
|
|
@keyframes fade-in-down {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
.animate-fade-out-down {
|
|
animation: var(--animate-fade-out-down);
|
|
}
|
|
|
|
@keyframes fade-out-down {
|
|
from {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
}
|
|
.animate-fade-in-up {
|
|
animation: var(--animate-fade-in-up);
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translate3d(0, 100%, 0);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
.animate-fade-out-up {
|
|
animation: var(--animate-fade-out-up);
|
|
}
|
|
|
|
@keyframes fade-out-up {
|
|
from {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
to {
|
|
opacity: 0;
|
|
transform: translate3d(0, -100%, 0);
|
|
}
|
|
}
|
|
.animate-spin {
|
|
animation: var(--animate-spin);
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|
|
.animate-ping {
|
|
animation: var(--animate-ping);
|
|
|
|
@keyframes ping {
|
|
75%,
|
|
100% {
|
|
transform: scale(2);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
.animate-pulse {
|
|
animation: var(--animate-pulse);
|
|
|
|
@keyframes pulse {
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
}
|
|
.animate-bounce {
|
|
animation: var(--animate-bounce); /* bounce 1s infinite */
|
|
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateY(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: none;
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
}
|
|
.animate-none {
|
|
animation: none;
|
|
}
|
|
}
|