Fade-In Animation 
.fade-in {
    animation: fadeIn 2s forwards;
    opacity: 0;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

 Slide-In Animation 
.slide-in-from-left {
    transform: translateX(-10%);
    animation: slideInFromLeft 2s forwards;
}

@keyframes slideInFromLeft {
    to {
        transform: translateX(0);
    }
}

.slide-in-from-right {
    transform: translateX(100%);
    animation: slideInFromRight 2s forwards;
}

@keyframes slideInFromRight {
    to {
        transform: translateX(0);
    }
}

 Slide-In from Bottom Animation 
.slide-in-from-bottom {
    transform: translateY(10%);  Starts below its final position 
    animation: slideInFromBottom 2s forwards;
}

@keyframes slideInFromBottom {
    to {
        transform: translateY(0);  Ends at its final position 
    }
}