
@mixin eui-anim--flipInY {
    @include hacks();
    @keyframes eui-anim--flipInY {
        from {
            animation-timing-function: ease-in;
            opacity: 0;
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        }

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

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

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

        to {
            transform: perspective(400px);
        }
    }
    animation-name: eui-anim--flipInY;
    animation-duration: v(eui-base-animation-duration-base);
    backface-visibility: visible;    // mirror image of the front face being displayed useful when an element is rotated
}
