@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}
.DeslizarDIzq {
    animation: 1.5s ease-out 0s 1 slideInFromLeft;
}


@keyframes slideInFromRigth {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}
.DeslizarDDer {
    animation: 1.5s ease-out 0s 1 slideInFromRigth;
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.DeslizarDArriba {
    animation: 1s ease-out 0s 1 slideInFromTop;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-on-scroll {
    opacity: 0; /* Initial state */
    animation: fadeIn 2s forwards;
    /*animation-timeline: view();*/ /* Link animation to view progress */
    /* Other animation properties can be set as usual, duration is treated differently */
}