@keyframes flipInX {

    0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    }

    40% {
    animation-timing-function: ease-in;
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    }

    60% {
 
    opacity: 1;
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    }

    80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    100% {
    transform: perspective(400px);
    }

}

.flipInX {
animation-duration: 1.25s;
animation-name: flipInX;
backface-visibility: visible;
}