@keyframes keyframes-opacidad-0-a-1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes keyframes-desplazamiento-der-a-orig {
    0% {
        transform: translate(10%,0%)
    }
    100% {
        transform: translate(0%,0%)
    }
}

.animacion-aparecer-desde-derecha {
    animation: keyframes-opacidad-0-a-1 700ms normal 0ms, keyframes-desplazamiento-der-a-orig 700ms normal 0ms;
    animation-fill-mode: both;
}





.retraso-50ms {
    animation-delay: 50ms;
}
.retraso-100ms {
    animation-delay: 100ms;
}
.retraso-150ms {
    animation-delay: 150ms;
}
.retraso-200ms {
    animation-delay: 200ms;
}
.retraso-250ms {
    animation-delay: 250ms;
}
.retraso-300ms {
    animation-delay: 300ms;
}
.retraso-350ms {
    animation-delay: 350ms;
}
.retraso-400ms {
    animation-delay: 400ms;
}
.retraso-450ms {
    animation-delay: 450ms;
}
.retraso-500ms {
    animation-delay: 500ms;
}

.retraso-500ms {
    animation-delay: 500ms;
}
.retraso-1000ms {
    animation-delay: 1000ms;
}


.duracion-100ms {
    animation-duration: 100ms;
}
.duracion-150ms {
    animation-duration: 150ms;
}
.duracion-200ms {
    animation-duration: 200ms;
}  
.duracion-250ms {
    animation-duration: 250ms;
}  
.duracion-500ms {
    animation-duration: 500ms;
}
.duracion-1000ms {
    animation-duration: 1000ms;
}
.duracion-2000ms {
    animation-duration: 2000ms;
}







/* Definir una clase de transición */
/*.page-transition-enter {
    opacity: 0;
    transform: translateX(-100%);
}

.page-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.5s, transform 0.5s;
}

.page-transition-exit {
    opacity: 1;
    transform: translateX(0);
}

.page-transition-exit-active {
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s, transform 0.5s;
}*/