111 lines
1.8 KiB
CSS
111 lines
1.8 KiB
CSS
/* Animations */
|
|
|
|
/* Fade In */
|
|
.fade-in {
|
|
animation: fadeInAnimation ease 1s;
|
|
animation-iteration-count: 1;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
@keyframes fadeInAnimation {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Slide */
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideOutRight {
|
|
from {
|
|
transform: translateX(0);
|
|
}
|
|
to {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in-up {
|
|
animation: fadeInUp var(--transition-slow) var(--transition-timing);
|
|
}
|
|
|
|
/* Spinner */
|
|
.spinner {
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: 3px solid var(--color-slate-700);
|
|
border-top-color: var(--color-slate-50);
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Pulse */
|
|
.pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Transitions */
|
|
.transition {
|
|
transition: all var(--transition-base) var(--transition-timing);
|
|
}
|
|
|
|
.transition-colors {
|
|
transition: color var(--transition-base) var(--transition-timing),
|
|
background-color var(--transition-base) var(--transition-timing),
|
|
border-color var(--transition-base) var(--transition-timing);
|
|
}
|
|
|
|
.transition-transform {
|
|
transition: transform var(--transition-base) var(--transition-timing);
|
|
}
|
|
|
|
.transition-opacity {
|
|
transition: opacity var(--transition-base) var(--transition-timing);
|
|
}
|
|
|
|
/* Hover */
|
|
.hover-scale:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
transform: translateY(-2px);
|
|
}
|