.page-transition-enter {
    transition: opacity .3s ease-in-out;
    opacity: 0;
    position: absolute;
}
.page-transition-enter.page-transition-enter-active {
    opacity: 1;
}
.page-transition-leave {
    transition: opacity .3s ease-in-out;
    opacity: 1;
    position: absolute;
}
.page-transition-leave.page-transition-leave-active {
    opacity: 0;
}
.frame1 {
    animation: opacityTransition1 0.3s ease-in-out;
}

.frame2 {
    animation: opacityTransition2 0.3s ease-in-out;
}

@keyframes opacityTransition1{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes opacityTransition2{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}