.playDisappear {
    animation: disappear 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes disappear {
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}

.playAppear{
    animation: appear 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes appear {
    0%{
        opacity: 0;
    }

}

.playSlideTransitionText {
    animation: slideTransitionText 1.5s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes slideTransitionText {
    0%{
        transform: translateY(-50px);
        opacity: 0;
    }
    25%{
        transform: translateY(0px);
        opacity: 1;
    }
    75%{
        transform: translateY(0px);
        opacity: 1;
    }
    100%{
        transform: translateY(-50px);
        opacity: 0;
    }
}


.playQuestionAppear {
    animation: questionAppear 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes questionAppear {
    0%{
        transform: translateX(-50px);
        opacity: 0;
    }
    100%{
        transform: translateX(0px);
        opacity: 1;
    }
}


.playChoicesAppear {
    animation: choicesAppear 0.3s ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes choicesAppear {
    0%{
        transform: translateY(-50px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;
    }
}