@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-60px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(60px);
}
to {
opacity: 1;
transform: translateX(0);
}
} @keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
} .scroll-animate {
opacity: 0;
}
.scroll-animate.animate-in {
animation-duration: 0.8s;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-animate.fade-up {
animation-name: fadeInUp;
}
.scroll-animate.fade-left {
animation-name: fadeInLeft;
}
.scroll-animate.fade-right {
animation-name: fadeInRight;
}
.scroll-animate.scale-in {
animation-name: scaleIn;
} .scroll-animate.delay-100 {
animation-delay: 0.1s;
}
.scroll-animate.delay-200 {
animation-delay: 0.2s;
}
.scroll-animate.delay-300 {
animation-delay: 0.3s;
}
.scroll-animate.delay-400 {
animation-delay: 0.4s;
}
.scroll-animate.delay-500 {
animation-delay: 0.5s;
}
.scroll-animate.delay-600 {
animation-delay: 0.6s;
}
.scroll-animate.delay-700 {
animation-delay: 0.7s;
}
.scroll-animate.delay-800 {
animation-delay: 0.8s;
}