/* Initial state of all animated sections */
.section {
    opacity: 0;
    transition: opacity 1s ease-out, transform 1s ease-out; /* The same transition you use in your keyframes */
}

/* Animations */
.section.fade-in {
    opacity: 1;
}

.section.slide-in-left {
    opacity: 1;
    transform: translateX(0);
}

.section.slide-in-right {
    opacity: 1;
    transform: translateX(0);
}

/* Keyframes for the animations */
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}